Axios

Axios的基本使用

get，获取数据
post，提交数据（表单提交以及文件上传）
put，更新数据 （提交所有的数据）
patch，提交数据 （提交修改的数据）
delete，删除数据

axios({
    method: 'get',
    url: '',
    params: {}
}).then(res => { do something })

并发请求
同时进行多个请求，并统一处理返回值，如果在某些场景中我们需要同时依赖两个接口返回的数据，那么我们可以使用并发请求。

axios.all([  // 这里的参数是一个数组，里面包含了axios请求
  axios.get('url1'), // 请求的先后顺序就是代码中的顺序
  axios.get('url2')
]).then(
  axios.spread((res1, res2) => { // spread用来分割返回值
    console.log(res1, res2)
  }
)

为了应对多个服务器的ip地址，应该实例化axios

创建axios实例

 const instance = axios.create({
            baseURL: 'http://152.136.185.210:7878/api/m5',
            timeout: 5000
        })

axios配置

全局配置，例如axios.defaults.timeout = 1000
实例配置, 在创建axios实例时传入的配置，如果不传实例配置就会使用全局配置
请求配置，在使用axios请求时，可以单独传入新的配置
这三种配置的优先级为：请求配置 > 实例配置 > 全局配置

拦截器

请求拦截器：

axios.interceptors.request.use(
  config => {}, // 在发送请求前的一些处理逻辑
  err => {} // 在请求错误后的处理
)

响应拦截器：

axios.interceptors.response.use(
  res => { return res }, // 请求成功后对响应数据做一定的处理
  err => { return Promis.reject(err)} // 在响应错误后的处理，可以用catch捕捉
)

封装axios请求

request.js

import axios from 'axios'
export function request(config) {
        const instance = axios.create({
            baseURL: 'http://152.136.185.210:7878/api/m5',
            timeout: 5000
        })
    /* axios的拦截器 */
    /* 传入两个参数（都是函数），发送成功调用第一个函数，发送失败调用第二个函数 */
    /* 请求拦截 */
    instance.interceptors.request.use(config => {
        /* 请求拦截的作用 */
        /* 比如config中的一些信息不符合服务器的要求，要改 */
        /* 比如在发送网络请求时页面加一个请求的图标 */
        /* 某些网络请求需要携带token */
        console.log(config);
        /* 返回出去，不然就被拦截了 */
        return config
    }, err => {
        console.log(err);
    })
    /* 响应拦截 */
    instance.interceptors.response.use(res => {
        console.log(res);
    }, err => {
        console.log(err);
    })
    /* 发送请求 */
    /* axios本身就返回一个promise */
        return instance(config)

}

使用

/* 封装request模块 */
import { request } from './network/request'
request({
    url: '/home/data?type=sell&page=1',
    method: 'get'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})