【axios三部曲】一、使用axios

axios作为一个基于promise的网络请求库，它同时支持浏览器和node环境，是我们开发中常用的一个库
?

它的一些特性：

• 从浏览器发出XMLHttpRequests
• 从node.js发出http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• JSON数据的自动转换
• 客户端支持防止XSRF

?

资源

• https://www.npmjs.com/package/axios axios库项目地址
• https://github.com/typicode/json-server json-server快速搭建一个REST api服务

准备工作

?

搭建一个本地服务

npm install -g json-server

db.json

{  "posts": [    { "id": 1, "title": "json-server", "author": "typicode" }  ],  "comments": [    { "id": 1, "body": "some comment", "postId": 1 }  ],  "profile": { "name": "typicode" }}

运行服务

json-server --watch db.json

服务搭建完毕，就可以从本地访问数据

GET    /postsGET    /posts/1POST   /postsPUT    /posts/1PATCH  /posts/1DELETE /posts/1

axios的使用

axios(config);axios(url[,config]);

最基础的使用方法，引入了axios库就可以直接使用，核心在于config配置，如果没有传入config，就是用默认的

axios({	url: 'http://localhost:3000/posts',  method: 'get'});axios('http://localhost:3000/posts', {	method: 'post',  data: {a:12}})

axios的别名方法

前面介绍了axios的核心方法，可以满足所有请求方法类型[get, post, delete...]，不过也有它的别名方法，是为了方便简写，实际上也是调用axios(config)，有如下别名方法：

• axios.request(config)
• 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]])

axios的实例使用

有这样一种场景，一个项目需要请求不同域名的数据：

• A，http://www.a.com/api
• B，http://www.b.com/post

有没有办法让axios区分这两个请求地址，并分别发送请求呢？
?

这里我们就可以用到axios的实例（instance），通过axios.create()创建，两个实例单独配置，互不影响

// 通过axios.create创建出一个新的单独实例，不和其他实例产生影响let axiosA = axios.create({  // 根路径，以后的请求地址都会拼接上这个地址	baseUrl: 'http://www.a.com/api',});// 这里的请求地址最终为：http://www.a.com/api/getTotalaxiosA.get('/getTotal').then(response=>{});// =============================================================let axiosB = axios.create({	// 根路径，以后的请求地址都会拼接上这个地址	baseUrl: 'http://www.b.com/post',});// 这里的请求地址最终为：http://www.b.com/post/getNameaxiosB.get('/getName').then(response=>{});

?

axios实例的别名方法

• request(config)
• get(url[, config])
• delete(url[, config])
• head(url[, config])
• options(url[, config])
• post(url[, data[, config]])
• put(url[, data[, config]])
• patch(url[, data[, config]])
• getUri([config])

axios的默认config配置项

axios的配置项比较多，不过大多数都有默认配置，我们就看一些常用的配置，具体的可以参照官方文档

{  url: '/user',		// 请求地址  method: 'get', // 如果没有指定method，默认get  baseURL: 'https://some-domain.com/api/',	// 请求根路径  transformRequest: [function (data, headers) {	// 请求数据转换器    return data;  }],  transformResponse: [function (data) {					// 响应数据转换器    return data;  }],  headers: {'X-Requested-With': 'XMLHttpRequest'},	// 请求头  params: {																					// 请求参数    ID: 12345  },	  data: {																						// post提交数据    firstName: 'Fred'  },  timeout: 1000, // default is `0` (no timeout)  adapter: function (config) {										// 适配器，识别浏览器端还是node端    /* ... */  },  auth: {    username: 'janedoe',    password: 's00pers3cret'  },  responseType: 'json', // default  responseEncoding: 'utf8', // default  maxContentLength: 2000,  maxBodyLength: 2000,  maxRedirects: 5, // default  cancelToken: new CancelToken(function (cancel) {  }),  // ...}

axios请求成功响应结果

axios.get('http://localhost:3000/posts').then(response=>{	console.log(response);})

当我们请求成功后，response的响应结果到底是怎样的？

{  data: {},	// 请求成功的返回数据  status: 200, // 状态码  statusText: 'OK', // 状态描述  headers: {}, // 请求头  config: {}, // config配置项  request: {} // XMLHttpReqest对象}

axios的全局默认配置

一些通用的配置项，每次都写很麻烦，就通过全局的方式写一次即可，比如headers头信息，baseUrl等

axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

设置好以后，请求就会有这些默认配置

// https://api.example.com/aaxios.get('/a');

假设我又有一个新的请求了，不想用这个baseUrl地址，我们完全可以通过实例的配置重新覆盖全局配置

let axios2 = axios.create({	baseUrl: 'www.baidu.com'});// www.baidu.com/baxios2.get('/b');

axios的配置config优先级

这里有一个要注意点，关于config的优先级谁的最高？从低到高

• axios库的默认defaults // 最低
• 实例的defaults属性
• 传入的config参数 // 最高

axios的拦截器

何为拦截器？

你可以在这个请求发起之前（request interceptor），和响应数据之后（response interceptor）进行拦截处理
?

请求拦截器1(config)	// 函数里面进行处理后，需要返回config请求拦截器2(config)	// 函数里面进行处理后，需要返回config...发起数据请求（真实请求）响应拦截器1(response) // 函数里面处理后需要返回response响应拦截器2(response) // 函数里面处理后需要返回response...返回给用户

如何使用

axios.interceptors.request.use(function success(config){	// 处理数据  return config;}, function fail(error){	return Promise.reject(error);});axios.interceptors.response.use(function success(response){	// 处理数据  // response.data = JSON.parse(response.data);  return response;}, function fail(error){	return Promise.reject(error);});

执行流程就如上所示，请求拦截器request会放到 真实请求的前面， 响应拦截器会添加到 真实请求的后面