axios基础

1.定义

axios多用于vue中，作为网络应用。

2.基本语法

2.1get请求语法

1）原生写法：

axios({
  url:url,
  method:'get',
  params:请求参数,
}).then(res => {
    //成功的处理
}).catch(err => {
   //失败的处理
})

对于原生的写法，请求参数都是一个对象，而且格式比较麻烦，因此axios自己就进行了简写，有了下面的写法。

2）简写

axios.get(url,[options]).then(res => {
   //成功的处理
},err => {
    //失败的处理
}

get如果需要传递options参数，那么写法为{ params: { 参数名称:参数值 } }

2.2post请求语法

原生写法：

axios({
  url:url,
  method:'post',
  data:请求参数,
}).then(res => {
    //成功的处理
}).catch(err => {
   //失败的处理
})

传递的参数前面的data，这种方式传递的参数到后台是一个json对象，后台就必须使用@RequestBody进行接收。如果想要和get请求一样接收参数，那么就使用params，而不使用data，此时就会把参数拼接在地址栏，但是方法必须是post：

axios({
  url:url,
  method:'post',
  params:请求参数,
}).then(res => {
    //成功的处理
}).catch(err => {
   //失败的处理
})

简写：

axios.post(url,[body]).then(res => {
   //成功的处理
},err => {
    //失败的处理
}

post的传递参数是对象。

2.3delete请求语法

axios.delete(url+'/'+options).then(res => {
   //成功的处理
},err => {
    //失败的处理
}

2.4并发请求all

当需要多个请求同时请求时，可以使用all。不常用。

axios.all([网络请求1, 网络请求2])
  .then(axios.spread((res1, res2) => {
    console.log(res1)
    console.log(res2)
  })
)

3.基本使用

先创建一个vue的项目，名字为axios-demo，删除HelloWord.vue文件，接下来请看以下步骤。

3.1安装axios

在根目录执行

npm i axios -S

3.2get请求测试

在main.js中导入axios，然后使用

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

axios.get('https://autumnfish.cn/api/joke/list', {
  //传递参数，如果没有参数则省略这个对象即可
  params: {
    num: 5
  }
}).then(res => {
  console.log(res.data)
}, err => {
  console.log(err)
})

3.3post请求测试

axios.post('https://autumnfish.cn/api/user/reg',{
  username:'123456556'
}).then(res => {
  console.log(res.data)
}, err => {
  console.log(err)
})

3.5全局配置

在3.2和3.3测试中，会发现请求的url的前面一部分都是相同的，那么就可以进行全局配置

axios.defaults.baseURL = 'https://autumnfish.cn/api'

对post请求统一设置请求类型

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-rulencode'

统一设置请求超时时间

axios.defaults.timeout = 时间    //单位是ms

4.创建axios实例

后端的服务器可能有多个，那么全局配置就不好用了，就可以创建自己的实例来进行配置。

const instance1 = axios.create({
  baseURL: 'baseUrl',
  timeout: 5000
})

使用实例：和全局的用法一样。如果是多个服务器就创建多个实例即可。

instance1.get(url,[options]).then(res => {},err => {})

5.拦截器

拦截器分为请求拦截和响应拦截。请求拦截一般用在请求时携带验证信息，响应拦截主要是返回有用的数据。

//请求拦截
axios.interceptors.request.use(
    config => {
      return config
    }, err => {
      return err 
    }
  )
//响应拦截
axios.interceptors.response.use(
    res => {
      return res
    }, err => {
      return err 
    }
  )

请求拦截使用场景：在请求的时候添加请求头headers信息（通过config.headers进行设置）。

6.vue封装axios

在很多地方如果直接使用第三方axios，需要都导入，对它的依赖性太强，难以维护，对它封装就很有意义。

创建文件src/network/request.js

import axios from 'axios'
const instance = axios.create({
    baseURL: '/api',
    timeout: 5000
})
//请求拦截
instance.interceptors.request.use(
    config => {
        return config
    }, err => {
        return Promise.reject(err)
    }
)
//响应拦截
instance.interceptors.response.use(
    res => {
        // 不拦截下载流文件
        const contentType = res.headers['content-type'].toLowerCase()
        if (contentType === 'application/octet-stream;charset=utf-8' || contentType === 'arrayBuffer;charset=UTF-8') {
            return res
        }
        return res.data
    }, err => {
        if (err.response) {
            switch (err.response.status) {
                case 401: console.log('无权限')
             }
        }
        return Promise.reject(err.response.data)
    }
)

//方法封装
const request = {
    get(url, params) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                params: params
            }).then(res => {
                resolve(res);
            }).catch(err => {
                reject(err)
            })
        });
    },
    post(url, params) {
        return new Promise((resolve, reject) => {
            instance.post(url, params)
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    },
    postParam(url, data) {
        const keys = Object.keys(data)
        let params = ''
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i]
            let value = data[key]
            if (value != null && value != '') {
                if (i != 0) {
                    params += '&'
                }
                //对特殊字符进行转义
                value = encodeURIComponent(value)
                params += key + '=' + value
            }

        }
        return new Promise((resolve, reject) => {
            instance.post(url, params)
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    },
    put(url, params) {
        return new Promise((resolve, reject) => {
            instance.put(url, params)
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    },
    delete(url) {
        return new Promise((resolve, reject) => {
            instance.delete(url)
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    },
    //用于下载文件
    postDownload(url, params) {
        return new Promise((resolve, reject) => {
            instance.request({
                url: url,
                method: 'POST',
                data: params,
                responseType: 'arraybuffer'
            })
                .then(res => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err)
                })
        });
    },
}




export default request

这里并没有设置请求后台的具体路径，这个在vue.config.js中进行配置。如果需要token，那么设置即可。对于下载文件，一般使用post请求，同时设置响应类型是arraybuffer。对于拦截器的错误状态，可根据需求进行处理，上述只写了一个作为模板。

在main.js中导入使用

import Vue from 'vue'
import App from './App.vue'

import request from './network/request'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

request.get('joke/list', {
    num: 5
  }
).then(res => {
  console.log(res)
}, err => {
  console.log(err)
})
request.post('user/reg', {
  username: '123456556'
}).then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

7.axios传递数组

7.1get请求传递数组

const arr = [1,2,3]
axios.get('api/test',arr.toString()).then(res=>{
  console.log(res)
}).catch(err=>{console.log(err)})

get方式传递数组，需要把数组转为字符串传递，不能直接传递数组给后台。后台接收：

@GetMapping("/api/testt")
public void get(String array){
    System.out.println(arrar);//1,2,3
}

后台接收后是一个字符串，通过逗号进行分隔。

7.2delete请求传递数组

对于delete请求传递数组，不需要转换，直接传递即可。

const arr = [1,2,3]
axios.delete('api/'+arr).then(res=>{
  console.log(res)
}).catch(err=>{console.log(err)})

后台接收：

 @DeleteMapping("/api/{arr}")
 public void delete(@PathVariable("arr")String arr){
      System.out.println(arr);//1,2,3
 }