axios详解

选择什么网络模块?

Ajax

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

非常好解释, 配置和调用方式等非常混乱.
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用, 而是使用jQuery-Ajax

jQuery-Ajax

选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用.

为什么不选择它呢?

首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.
那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
jQuery的代码1w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用这个重量级的框架.

Vue-resource

选择三: 官方在Vue1.x的时候, 推出了Vue-resource.

Vue-resource的体积相对于jQuery小很多.
另外Vue-resource是官方推出的.

为什么不选择它呢?

在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.
对以后的项目开发和维护都存在很大的隐患.

Axios

作者推荐,axios有非常多的优点, 并且用起来也非常方便.ajax i/o system

功能特点:

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据等待

axiox请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

基本使用

npm install axios --save下载axios。这里的请求地址后端做了跨域处理

get请求的参数拼接

通过params属性对象对get请求参数拼接

发送并发请求

有时候, 我们可能需求同时发送两个请求

使用axios.all, 可以放入多个请求的数组.

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

返回的结果是一个数组对象

使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

全局配置

事实上, 在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = ‘123.207.32.32:8000’

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

通过配置全局的baseURL可以省略掉这前面固定的部分，发送请求只需要填写后面的部分即可组合起来请求地址，发送请求。

axios的实例

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

通过axios.create()创建axios实例

axios封装

创建network目录创建request.js对axios进行封装

import axios from "axios";

export function request(config) {
   return new Promise((resolve, reject) => {
    //1.创建axios的实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000/',
      timeout: 50000
    })

    //发送网络请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

使用封装好的axios发送请求

import {request} from "./network/request";

request({
  url: 'home/multidata'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err);
})