Axios及其async await封装

Axios（IE8+）

基于promise的http库
可用于浏览器与node.js

1.特性

1. 支持promise API
2. 拦截请求和相应
3. 转换请求数据和响应数据
4. 取消请求
5. 自动转换JSON数据
6. 客户端支持防御XSRF攻击

2.axios请求方法：get，post，put, patch, delete

1get: 获取数据
2post（新建）: 提交数据（表单，文件）
3put（更新）: 更新数据（所有数据推送到后端）
4patch（耗性能）: 更新数据（只将修改的数据推送到后端）
5delet: 删除数据

3.返回304(重定向)

表示重复的请求，直接返回304，加快请求速度

4.post(Content-Type)

11.form-data 表单提交（文件上传）
22.application/json 常用数据提交
3
4//form-data请求举例
5let formData = new FormData()
6for(let key in data){
7    formData.append(key,data[key])
8}

5.并发请求（同时进行多个请求，并统一处理返回值）

1//axios.all() 用于多个请求并发
2//axios.spread() 用于处理返回值
3
4axios.all(
5    [
6        axios.get('/data.json1'),
7        axios.get('/data.json2')
8    ]
9).then(
10    axios.spread((json1,json2)=>{
11        console.log(json1,json2)
12    })
13)

6.axios实例化

当每请求的设置不尽相同时，可以通过配置实例发起不同设置的请求

1let instance = axios.create({
2    baseURL: 'http://localhost:8080',
3    timeout: 1000,
4})
5instance.get('/data.json').then(res=>{
6    console.log(res)
7})

7.axios配置

1. 全局配置

11.axios.defaults.timeout = 2000
22.axios.defaults.baseURL = ''

2. 实例配置

1let instance = axios.create({
2    //配置
3    baseURL: 'http://localhost:8080',//请求的域名，基本地址
4    timeout: 1000,//超时取消请求时长（ms），一般后台会有定义
5    url: '/data.json',//请求路径
6    method: 'get',//get，post，put, patch, delete(请求方法)
7    headers: {//设置请求头
8        token: '',//身份信息
9    },
10    params: {},//请求参数拼接在url（get）
11    data: {},//请求参数放在请求体（post）
12})
13instance.defaults.timeout = 3000

3. 请求配置

1instance.get('/data.js',{
2    timeout: 5000
3})

4. 优先级

请求配置>实例配置>实例配置

8.拦截器

在请求或响应被处理前拦截他们

1. 请求拦截器

1axios.interceptors.request.use(
2    config => {
3        //发送请求前
4        return config
5    },
6    err => {//错误处理
7        //请求错误的时候 404 not find,401超时等
8        return Promise.reject(err)
9    }
10)

2. 响应拦截器

1axios.interceptors.response.use(
2    res => {
3        //请求成功
4        return res
5    },
6    err => {//错误处理
7        //响应错误的时候 500服务器错误等
8        return Promise.reject(err)
9    }
10)

3. 取消拦截器

1axios.interceptors.request.eject(interceptors)

9.取消请求

1let source = axios.CancelToken.source() //创建实例
2axios.get('/data.js',{//开始请求
3    cancelToken: source.token//配置项
4}).then(res => {
5    console.log(res)
6}).catch(err => {
7    console.log(err)
8})
9
10source.cancel('请求取消了')//调用方法取消请求

10.统一封装(async await 方法)

api.js接口信息

1//api.js接口信息
2const api = {
3    api1: {
4        method: 'get',
5        url: '/data1.js
6    },
7    api2: {
8        method: 'post',
9        url: '/data2.js
10    }
11}
12export default api

http.js请求对象

1import axios from 'axios'
2import Api from 'api.js'
3
4let instance = axios.creat({
5    baseURL: 'http://localhost:8080',
6    timeout: 1000
7})
8const Http = {}//包裹请求方法的容器
9
10for(let key in Api){
11    let api = Api[key]
12    Http[key] = async function(
13        params,//请求参数
14        isFormData=false,//是否是form-data请求
15        config={}//配置参数
16    ){  
17        let newParams = {}
18
19        //判断content-type是不是form-data类型
20        if(params && isFormData){
21            newParams = new FormData()
22            for(let i in params){
23                newParams.append(i,params[i])
24            }
25        }else newParams = params
26
27        //不同请求的判断
28        let res = {}
29        if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
30            try{
31                res = await instance[api.method](api.url,newParams,config)
32            }catch(err){
33                res = err
34            }
35        }else if(api.method === 'delete' || api.method === 'get'){
36            config.params = newParams
37            try{
38                res = await instance[api.method](api.url,config)
39            }catch(err){
40                res = err
41            }
42        }
43        return res //返回响应值
44    }
45}
46//请求拦截器
47instance.interceptors.request.use(
48    config => {
49        //发起请求前
50        Toast.loading()
51        return config
52    },
53    err => {
54        //请求错误
55        Toast.clear()
56        return err
57    }
58)
59//响应拦截器
60instance.interceptors.response.use(
61    res => {
62        //响应前
63        Toast.clear()
64        return res.data
65    },
66    err => {
67        //响应错误
68        Toast.clear()
69        return err
70    }
71)
72
73export default Http

调用方法

1import Http from 'http.js'
2Vue.prototype.$Http = Http
3
4async function(){
5    let res = await this.$Http.api1({id: 4})
6}
7
8async function(){
9    let res = await this.$Http.api2(info,true,config)
10}

---