1.认识 Axios
1.1 简介
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
1.2 安装
npm install axios
2.使用
2.1 直接发起请求
import axios from 'axios';
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(data=>{
console.log(data);
});
2.2 使用别名进行请求
import axios from 'axios';
axios.request({
method: 'post'
url: '/user/123456',
data: {}
})
axios.get(url, config);
axios.delete(url, config);
axios.head(url, config);
axios.options(url, config);
axios.post(url, data, config);
axios.put(url, data, config);
axios.patch(url, data, config);
2.3 创建实例进行请求
import axios from 'axios';
const instance = axios.create({
// config 配置项
baseUrl: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
})
//再使用别名的方式进行请求，调用后返回的也是一个 Promise 对象
instance.get('user/123456').then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
3.config配置项
{
url: '/user',
//用于请求服务器的url
method: 'get',
//请求方法，默认get
baseURL: 'https://some-domain.com/api/',
//请求url的前缀，拼接url值组成最终路由，https://some-domain.com/api/user
transformRequest: [function (data, headers) {
// 处理数据
return data;
}]
//用于在发送请求前，对请求数据进行处理
//只能用于 "PUT"、"POST"、"PATCH" 这几个请求方法
//（为什么是传数据，传多个处理方法会怎样，后面再研究）
transformResponse: [function (data){
// 处理数据
return data;
}]
//用于在触发 then/catch 前对响应数据进行处理
headers: {'X-Requested-With': 'XMLHttpRequest'},
// 自定义请求头
params: {
ID: 12345
}
//与请求一起发送的 url 参数
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
//可选方法，用于序列化 params
data: {
name: 'string1'
},
// 作为请求体被发送的数据，仅适用于 'PUT'、'POST'、'DELETE' 和 'PATCH' 请求方法
// 在没有设置 `transformRequest` 时，则必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属: FormData, File, Blob
// - Node 专属: Stream, Buffer
timeout: 1000,
// 超时毫秒数，请求时间超过设置值会被中断
// 设置为 0 则表示永不超时
withCredentials: false, //default
// 表示跨域请求时是否需要使用凭证
adapter: function(config){
//需要返回一个 promise 并提供一个有效的响应
//具体怎么实现，后续再研究
}
//自定义处理请求
auth: {
username: 'username1',
password: 'password1'
}
//用于设置 headers 的 Authorization 属性，它包含了服务器用于验证用户代理身份的凭证
//通常在出现 401状态码或 WWW-Authenticate 消息头后，后续的请求头附上该属性
//请求头中它的值为 username:password 经过 base64 加密后的结果
responseType: 'json', //默认值
//表示浏览器将要响应的数据类型，可选值有 'arraybuffer'、'document'、'json'、'text'、'stream'
//浏览器专属 'blob'
responseEncoding: 'utf8',
//用于解码响应的编码，node.js 专属
xsrfCookieName: 'XSRF-TOKEN', // 默认值
//是 xsrf token 的值，被用作 cookie 的名称 (看不懂，后面再研究)
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
//是带有 xsrf token 值的http 请求头名称 (看不懂，后面再研究)
onUploadProgress: function (progressEvent) {
// 处理原生进度事件
},
//允许为上传处理进度事件，浏览器专属（后面再研究下具体怎么用）
onDownloadProgress: function (progressEvent) {
// 处理原生进度事件
},
//允许为下载处理进度事件，浏览器专属（后面再研究下具体怎么用）
maxContentLength: 2000,
//用于设置node.js中允许http响应内容的最大字节数
maxBodyLength: 2000,
//用于设置node.js中允许http请求内容的最大字节数
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
//自定义根据返回状态码决定执行 resolve 还是 reject
//返回 true 执行 resolve, false 执行 reject
maxRedirects: 5, // 默认值
//定义了在node.js中要遵循的最大重定向数，如果设置为0，则不会进行重定向
//node.js 重定向相关的有空再了解一下
socketPath: null, // default
//定义了在node.js中使用的UNIX套接字 (看不懂，后面再研究)
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
//设置 http 或 https 请求时的代理配置，比如 keepAlive
//具体有哪些配置项，后面再研究
proxy: {
protocol: "https",
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
}
//配置代理的具体信息
//常见的包括协议、主机名和端口号
//表示本次请求都会代理到 127.0.0.1:9000 去
//也可以设置为false，表示取消代理
cancelToken: new CancelToken(function (cancel) {
})
//指定用于取消请求的 token，具体怎么用后面再研究
}
配置项的优先级，lib/defaults.js 的库默认值 > axios.defaults属性 > 请求的config参数
4.响应结构
axios.get('/user').then(res=>{
res.data;
//{}，服务器提供的响应内容
res.status;
//200，响应状态码
res.statusText;
//OK，状态码描述
res.headers;
//{content-type: '...'}，响应头
res.config;
//{}，axios的请求配置
res.request;
//生成此响应的请求
//在node中是 ClientRequest 实例，在浏览器中是 XMLHttpRequest 实例
})
5.拦截器
const instance = axios.create();
//添加请求拦截器
const myRequestInterceptor = instance.interceptors.request.use(function(config){
//在发送请求之前做些什么
return config;
},function(error){
//对请求错误做些什么
return Promise.reject(error);
})
//添加响应拦截器
const myResponseInterceptor = instance.interceptors.response.use(function(response){
//2xx内的状态码都会触发该函数
//对响应数据做点什么
return response;
},function(error){
//超过2xx范围的状态码都会触发该函数
//对响应错误做点什么
return Promise.reject(error);
})
//移除拦截器
instance.interceptors.request.eject(myRequestInterceptor);
instance.interceptors.response.eject(myResponseInterceptor);
6.错误处理
axios.get('/user').catch(function(err)=>{
if(err.response){
//请求已发出，且收到了响应，但状态码超出了2xx范围
const {data, status, headers} = err.response;
console.log(data, status, headers);
}else if(err.request){
//请求已发出，但未收到响应
//request 在node中是 ClientRequest 实例，在浏览器中是 XMLHttpRequest 实例
console.log(err.request);
}else{
//发送请求时出现了问题
console.log('Error', err.message);
}
//获取更多关于HTTP错误的信息
console.log(err.toJSON());
})
7.取消请求
7.1 AbortController
const controller = new AbortController();
axios.get('/user',{
signal: controller.signal
}).then(res=>{});
//取消请求
controller.abort();
7.2 CancelToken
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user',{
cancelToken: source.token
}).then(res=>{})
//取消请求
source.cancel('cancel message');
8.请求体编码
默认情况下，axios 会将 js 对象序列化为 json 格式，如果要以 application/x-www-form-urlencoded 格式发送数据，则需要对请求数据进行特殊处理。
8.1 浏览器
//使用 URLSearchParams API
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/foo',params);
//但有些浏览器不支持 URLSearchParams，可以使用 qs 库编码数据
const qs = require('qs');
axios.post('/foo',qs.stringify({'bar': 123}));
8.2 node.js
//使用 querystring 模块
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
//从'url module'中使用'URLSearchParams'
const url = require('url');
const params = new url.URLSearchParams({ foo: 'bar' });
axios.post('http://something.com/', params.to-
String());
//使用 form-data 库
const FormData = require('form-data');
const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));
axios.post('https://example.com', form, { headers: form.getHeaders() })
