0、安装
cnpm i axios--save
1、 基本用法
首先要在 main.js 中引⼊ axios
首先要在 main.js 中引⼊ axios
首先要在 main.js 中引⼊ axios
（重要的事情说三遍！！！）
import axios from 'axios' Vue.prototype.$axios = axios
然后才能在组件中使⽤ axios
<script> export default { mounted() { this.$axios.get('http://localhost:3000/goods.json').then(res => { console.log(res.data); }) } } </script>
2、 axios实例
2.1、 创建axios实例示例代码
在配置文件（axios.js）中配置
import axios from 'axios' let instance= this.$axios.create({ baseURL: 'http://localhost:3000', timeout: 2000 }) export default instance
在其他文件引入包后
import service from '../axios/axios.js' service.get('/goods.json').then(res => { console.log(res.data); })
也可以同时创建多个axios实例。
- axios实例常用配置：
2.2、 axios全局配置示例代码
也可以全部配置
//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
2.3、 axios实例配置示例代码
也可以不用配置，现用现创建现配置
let instance = this.$axios.create(); instance.defaults.timeout = 3000;
2.4、 axios请求配置示例代码
还可以直接在请求中进行配置
this.$axios.get('/goods.json', { timeout: 3000 }).then()
以上配置的优先级为： 请求配置 > 实例配置 > 全局配置
3、 axios请求方法
axios可以请求的方法：
3.1、 get请求示例代码
//⽅法⼀，请求格式类似于 http://localhost:8080/goods.json?id=1 this.$axios.get('/goods.json', { params: { id: 1 } }).then(res => { console.log(res.data); }, err => { console.log(err); }) //⽅法⼆ this.$axios({ method: 'get', url: '/goods.json', params: { id: 1 } }).then(res => { console.log(res.data); }, err => { console.log(err); })
3.2、 post请求
post请求一般分为两种类型
application/json：
//⽅法⼀ this.$axios.post('/url',{ id: 1 }).then(res => { console.log(res.data); }, err => { console.log(err); }) //⽅法⼆ $axios({ method: 'post', url: '/url', data: { id: 1 } }).then(res => { console.log(res.data); }, err => { console.log(err); })
form-data:
//方法三：form-data请求 let data = { //请求参数 } let formdata = new FormData(); for (let key in data) { formdata.append(key, data[key]); } this.$axios.post('/goods.json', formdata).then(res => { console.log(res.data); }, err => { console.log(err); })
3.3、 put和patch请求示例代码
//put请求 this.$axios.put('/url',{ id: 1 }).then(res => { console.log(res.data); }) //patch请求 this.$axios.put('/url',{ id: 1 }).then(res => { console.log(res.data); })
3.4、 delete请求示例代码
//参数以明文形式提交 this.$axios.delete('/url',{ params: { id: 1 } }).then(res => { console.log(res.data); }) //参数以封装对象的形式提交 this.$axios.delete('/url',{ data: { id: 1 } }).then(res => { console.log(res.data); }) //⽅法⼆ axios({ method: 'delete', url: '/url', params: { id: 1 }, //以明文形式提交参数data: { id:1 } //以封装对象形式提交参数 }).then(res => { console.log(res.data); })
4、 并发请求
并发请求： 同时进行多个请求， 并统一处理返回值示例代码
this.$axios.all([this.$axios.get('/goods.json'), this.$axios.get('/classify.json')]).then(this.$axios.spread((goodsRes, classifyRes) => { console.log(goodsRes.data); console.log(classifyRes.data); }))
5、 拦截器
拦截器： 在请求或响应被处理前拦截它们
5.1、 请求拦截器示例代码
this.$axios.interceptors.request.use(config => { // 发⽣请求前的处理 return config }, err => { // 请求错误处理 return Promise.reject(err); }) //或者⽤axios实例创建拦截器 let instance = $axios.create(); instance.interceptors.request.use(config => { return config })
5.2、 响应拦截器示例代码
this.$axios.interceptors.response.use(res => { //请求成功对响应数据做处理 return res //该返回对象会传到请求⽅法的响应对象中 }, err => { // 响应错误处理 return Promise.reject(err); })
5.3、 取消拦截示例代码
let instance = this.$axios.interceptors.request.use(config => { config.headers = { token: '' } return config }) //取消拦截 this.$axios.interceptors.request.eject(instance);
6、 错误处理示例代码
请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
使用catch函数会捕捉拦截的错误
this.$axios.get('/url').then(res = { }).catch(err => { //请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象 console.log(err); })
7、 取消请求
主要用于取消正在进行的http请求。
示例代码如下
let source = this.$axios.CancelToken.source(); this.$axios.get('/goods.json', { cancelToken: source }).then(res => { console.log(res) }).catch(err => { //取消请求后会执行该方法 console.log(err) }) //取消请求，参数可选，该参数信息会发送到请求的catch中 source.cancel('取消后的信息')
