一起养成写作习气！这是我参加「日新方案 4 月更文应战」的第1天，点击检查活动概况。

不管任何前端项目都是离不开网络恳求。就前端恳求而言，axios是目前盛行的网络恳求，也是vue官方推荐运用的ajax库。把握它的根本运用是十分必要的，这篇文章将axios与vue项目结合做一个根本运用的总结，十分合适入门。

网络恳求开展史

要学习axios首要应该了解前端ajax恳求的大致开展。

1. 传统的Ajax
传统的Ajax恳求是根据XMLHttpRequest（XHR）目标。能够直接运用。但是运用起来装备较为费事，实践开发中运用十分少，在MVC年代一般运用的是JQuery-Ajax。相关于传统的Ajax现在运用更多的是Fetch恳求。

2. JQuery-Ajax
JQuery-Ajax在前端JQuery时，因为JQuery的强大兼容性在项目开发中$Ajax运用十分广泛，需求引入JQuery库，其底层原理也是对传统的Ajax，XHR目标进行封装。但是在前端结构MVVC年代，例如运用vue搭建项目，假如再继续运用$Ajax就还需再独自引入JQuery重量级1w+代码量的库是因小失大的。所以针关于结构的网络恳求应运而生。

3.axios
在Vue1.0年代，官方推出了Vue-resource，其体积相关于JQuery小的多，但是在Vue2.0年代官方宣布不再更新，那么继续运用Vue-resource就会存在版本无法匹配问题。因而在Vue2.0年代开端，官方推荐运用axios作为新一代的Ajax库。axios其长处：在浏览器中发送XMLHttpRequest恳求、在node中发送http恳求、支持Promise API、阻拦恳求和相应、转化恳求和呼应数据等，这儿不再一一描述，想进一步了解其长处，能够查询相关材料。

axios装置

先来看看axios的根本运用,本篇介绍axios的运用是与vue项目结合起来的，首要在命令行中输入npm create vue创立vue项目。其次，axios是一个第三方Ajax库，需求独自装置和引入，在命令行中输入npm install axios --save-D装置axios的依靠包。接着，在需求运用的当地引入axios目标import axios from axios，在实践开发中，一般会独自树立一个js文件引入axios引入再进行封装，下文会介绍。

axios根本运用

axios恳求办法

先来看看axios具体有哪些恳求办法：

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]]) axios(config)恳求办法： axios接纳一个目标，在目标中运用键值对办法写入装备信息，get恳求下，默许method能够不写。

axios({
    url:'http://123.207.32.32:8000/home/multidata',
    params:{
        type:'pop',
        page:1
    }
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

axios.request(config)恳求办法： 与axios(config)写法共同，都是接纳一个目标，在目标中运用键值对办法装备信息。

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

axios.get(url[, config])恳求办法 ：限定method为get恳求，网络恳求中get恳求是将参数拼接搭配url上发送的恳求，在axios恳求中则能够运用params特点装备将传递的参数拼接到url上。params特点是一个目标，其传递的参数运用键值对形式书写

axios.get('http://123.207.32.32:8000/home/multidata',{
  params:{
    type:'pop',page:1
    }
  }).then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err);
  })

axios装备

常见装备项

恳求地址：url: '/user'
恳求类型：method: 'get'
请根途径：baseURL: 'http://www.mt.com/api'
恳求前的数据处理：transformRequest:[function(data){}]
恳求后的数据处理： transformResponse: [function(data){}]
自界说的恳求头：headers:{'x-Requested-With':'XMLHttpRequest'}
URL查询目标：params:{ id: 12 },
查询目标序列化函数：paramsSerializer: function(params){ }
request body：data: { key: 'aa'}
超时设置：timeout: 1000,
跨域是否带Token：withCredentials: false
自界说恳求处理：adapter: function(resolve, reject, config){}
身份验证信息：auth: { uname: '', pwd: '12'}
呼应的数据格式json / blob /document /arraybuffer / text / stream：responseType: 'json'

大局装备

第三方结构经过import axios from axios引入axios归于大局的axios。运用default关键字能够对axios进行一个装备。那么一切的axios恳求都会带着default预先界说好的默许设置。关于公共的恳求装备能够抽离出来，例如：恳求超时时刻、服务器地址、设置恳求头号

语法格式：axios实例.default.装备项

参阅代码：

// axios.defaults.装备项===》axios大局装备
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.defaults.headers['X-TOKEN'] = '123xxx'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.responseType = 'blob' 
axios('home/multidata',
    {
        params: {
            type: 'pop',
            page: 1
        }
    }
).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

axios并发恳求

有时分存在这样一种情况：一起发送多个恳求，而且等到多个恳求完结呼应并拿到呼应内容时分才会回来。这个时分就需求运用到并发恳求。axios.all()本质上便是promise.all()。
axios.all()接纳一个Array数组作为参数，每个参数成员便是要发送的axios恳求体，axios.all()函数回来一个promise实例，经过.then办法接纳呼应的数据，而且呼应的数据也包裹在一个Array数组中，每个数组成员对应呼应的恳求成果。能够经过axios.spread()函数将回来的数组[res1,res2]打开为，res1，res2。留意，并发恳求假如有一个独自的恳求失利，那么axios.all()函数整个恳求就会报错，经过.catch()办法拿到报错信息。

axios.all([
    axios.get('http://123.207.32.32:8000/home/multidata', { params: { type: 'pop', page: 1 } }),
    axios({ url: 'http://123.207.32.32:8000/home/multidata', params: { type: 'pop', page: 1 } })
]).then(res => {
    console.log(res) // 回来的是数组包裹的呼应信息[res1,res2]
}).catch(err=>{
    console.log(err)
})

axios.all([
    axios.get('http://123.207.32.32:8000/home/multidata', { params: { type: 'pop', page: 1 } }),
    axios({ url: 'http://123.207.32.32:8000/home/multidata', params: { type: 'pop', page: 1 } })
]).then(axios.spread((res1,res2) => { // 运用axios。spread打开数组
    console.log(res1)
    console.log(res2)
})).catch(err=>{
    console.log(err)
})

创立axios实例

思考一下，咱们经过import axios from 'axios'引入了大局的axios目标，为什么还要再独自创立axios实例呢？

在实践项目开发中，咱们存在不同的恳求默许装备可能不一样，例如，服务器地址、恳求超时…默许装备不同，那么大局引入的axios再运用axios.default.装备项设置大局的默许一致的装备无法解决这个问题。因而，咱们运用axios.create()函数创立新的axios实例，不同的axios实例能够设置不同的默许装备，各个axios实例之间的装备是互不影响的。
axios.create()接纳一个目标参数，运用键值对传入默许的装备，回来axios实例。

import axios from 'axios'
// axios实例1
const axiosInstance1 = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
})
axiosInstance1({
    url:'/home/multidata',
    params:{
        type:'pop',
        page:3
    }
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})
// axios实例2
const axiosInstance2 = axios.create({
    baseURL:'http://192.168.5.110:9001',
    timeout:5000
})
axiosInstance1({
    url:'/home/multidata'',
    params:{
        type:'pop',
        page:3
    }
})
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

也能够对新创立的axios实例运用.default办法装备

import axios from 'axios'
// axios实例1
const axiosInstance1 = axios.create()
axiosInstance1.default.baseURL = 'http://123.207.32.32:8000'
axiosInstance1.default.timeout = 5000
axiosInstance1({
    url:'/home/multidata',
    params:{
        type:'pop',
        page:3
    }
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

axios阻拦器

阻拦器望文生义即为阻拦，对一切的恳求和呼应进行阻拦。

办法：
axios.interceptor.request.use()恳求阻拦器
axios.interceptor.response.use()呼应阻拦器

两个阻拦器运用办法共同，都接纳两个参数：

参数1：阻拦成功回调函数
参数2：阻拦失利回调函数。留意，不管恳求仍是呼应阻拦，阻拦完了要return 回来阻拦的恳求体和呼应体，不然就不会履行后边的恳求和呼应成果操作了。

可参axios照源码如下：

export interface AxiosInterceptorManager<V> {
  use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
  eject(id: number): void;
}

恳求阻拦器运用场景:

发送恳求时增加‘正在加载中…’图标
某些恳求有必要用户登陆，判断是否有用户token，没有跳转到登陆页
对恳求的参数进行序列化

axios.interceptor.request.use(res=>{
    console.log('来到了request阻拦的success中');
    // 阻拦完了要回来
    return res
},err=>{
    console.log('来到了request阻拦的failure中');
})

呼应阻拦器运用场景：

回来呼应的res.data数据成果
根据呼应的status状况码，做出不同的操作。例如：假如status是401，呼应阻拦失利，那么一般是token失效，没有授权，要跳转至登陆页；status是200，呼应阻拦成功操作，回来res.data呼应数据

axios.interceptor.response.use(res=>{
    console.log('来到了response阻拦的success中');
    // 阻拦完了要回来
    return res.data
},err=>{
    console.log('来到了response阻拦的failure中');
})

axios封装

在项目中，咱们一般会对恳求进行二次封装，在项目中src/utils文件下新建request.js文件存放封装的恳求，导入第三方恳求库。那么为什么会二次封装恳求呢？因为例如axios恳求归于第三方库，假如后期作者不再维护axios库的时分，咱们只需求修改request.js文件依靠的第三方结构部分，这样不会影响项目中其他需求发送恳求的代码。


import axios from 'axios'
import { useMsgbox, Message } from 'element3'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000, // request timeout
})
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  },
)
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      console.log('接口信息报错',res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('接口信息报错' + error) 
    return Promise.reject(error)
  },
)
export default service

axios基本使用及封装

网络恳求开展史

axios装置

axios根本运用

axios恳求办法

axios装备

axios并发恳求

创立axios实例

axios阻拦器

axios封装

作者信息

axios基本使用及封装

网络恳求开展史

axios装置

axios根本运用

axios恳求办法

axios装备

axios并发恳求

创立axios实例

axios阻拦器

axios封装

相关文章

fishhook swift 源代码简单分析，配合 MachOView

火山引擎 DataLeap 下 Notebook 系列文章二：技术路线解析

iOS APP日志写入文件 & 上传服务器

Compose实现更完美的BottomSheetBehavior效果

作者信息