axios - 掘金

为什么使用axios

Vue作者不再维护vue-resource，而推荐使用axios
axios功能特点
- 在浏览器中发送XMLHttpRequests请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 等等

axios请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axioxs.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios安装

npm install axios --save

基本使用

axios({
	url:'http://123.207.32.32:8000/home/multidata',
	method:'get'//不写默认为get方式
}).then(res =>{
	console.log(res);
})

axios({
	url:'http://123.207.32.32:8000/home/data?type=sell&page=1',
	// params:{ //使用params表示get后面的参数，写了params那么url?后面的数据就可以不写了
	// 	type:'sell',
	// 	page:1
	// }
}).then(res =>{
	console.log(res);
})

axios(config)中config常见的配置选项

请求地址
- url: '/user'
请求类型
- method: 'get'
- 请求类型为get，则使用params选项
- 请求类型为post，则使用data选项
请求根路径
- baseURL: 'http://123.207.32.32:8000'
请求前的数据处理
- tranformRequest: [function(data){}]
请求后的数据处理
- transformResponse: [function(data){}]
自定义请求头
- headers:{'x-Requested-With': XMLHttpRequest}
URL查询对象——get方法
- params: { id: 12}
查询对象序列化函数
- paramsSerializer: function(params){}
请求体——post方法
- data: {key: 'aa'}
超时设置
- timeout:1000
跨域是否带Token
- withCredentials: false
自定义请求处理
- adapter: function(resolve, reject, config){}
身份验证信息
- auth:{ uname: '123',pwd: '123'}
响应的数据格式 json /blob /document /arraybuffer /text /stream
- responseType: 'json'
更多

发送并发请求

axios.all(
    [//和Promise.all()基本相同，只不过是数组中存放的不是Promise而是axios
	axios({
	url:'http://123.207.32.32:8000/home/multidata',
	method:'get'//不写默认为get方式
        }),
	axios({
	url:'http://123.207.32.32:8000/home/data?type=sell&page=1'
	})
    ]).then(results =>{
	console.log(results);
})//axios还提供了方法将results分离
.then(axios.spread((res1,res2) =>{//前面的代码不变
    console.log(res1);
    console.log(res2);
}))

axios全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios({
	url:'home/multidata',//只用写后缀即可
}).then(res =>{
	console.log(res);
})

axios实例配置

//在一个项目中，可能请求数据的服务器会有多个，那么像上面的全局配置需要不断修改
//所以axios可以创建实例，并且在实例中配置，以后请求数据也用该实例请求
//创建实例，传入配置
const instance = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
//通过实例请求数据
instance({
	url:'home/multidata',
}).then(res =>{
	console.log(res);
})
//以后可以每针对一个服务器创建一个实例

axios拦截器

import axios from 'axios'
const instance = axios.create({
   baseURL: 'http://123.207.32.32:8000',
   timeout: 5000
})
//全局拦截
axios.interceptors
//实例拦截
//请求拦截
instance.interceptors.request.use(config =>{	//发送请求成功，这里的一个参数就是config
   //作用
   //1. 比如config中的一些信息不符合服务器的要求
   //2. 比如每次发送网络请求时，都希望在界面中显示一个请求图表
   //3. 某些网络请求(比如登录(携带token))，必须携带一些特殊信息
   console.log(config);
   return config;	//拦截后必须返回，不然在then中得不到数据
},err =>{	//发送请求失败
   console.log(err);
})
//响应拦截
instance.interceptors.response.use(res =>{	//服务器响应成功，这里的第一个参数就是结果，res中的data才是服务器返回的数据
   console.log(res);
   return res.data;	//必须返回(只有data是需要的)，不然在then中得不到数据
},err =>{	//服务器响应失败
   console.log(err);
})

axios封装

必要性

做一个项目，里面有很多组件会请求数据，所以在很多vue文件中，都会导入axios，并且使用它来请求数据。其实这样做非常危险，一旦这个axios宣布不再维护时，该项目必须要把所有关于axios的地方换成其他依赖。这样需要找出所有使用过axios的文件，并且一个个的修改。简直就是噩梦，这还只是一个依赖，当有多个依赖需要更换更麻烦。

所以需要封装一下，以后有修改需求，只用修改我们封装的文件就好。

封装

在src目录下新建一个network目录

network目录下创建一个request.js

import axios from 'axios'
export function request(config){
	//1.创建axios实例
	const instance = axios.create({
		baseURL:'http://123.207.32.32:8000',
		timeout:5000
	})
	//2.设置拦截器
	instance.interceptors.request.use(config =>{
    //待操作
		//console.log(config);
		return config;
	},err =>{
		console.log(err);
	})
	instance.interceptors.response.use(res =>{
    //待操作
		//console.log(res);
		return res.data;
	},err =>{
		console.log(err);
	})
	//3.发送网络请求
	return instance(config)
}

使用

import { request } from './network/request.js'
request({
	url:'home/multidata',
}).then(res =>{
	console.log(res);
})