axios的基本使用

什么是axios？

前端最流行的ajax请求库（轻量级）
react/vue都推荐的方法（绝对靠谱好用）
文档： https://github.com/axios/axios

axios的特点
基本promise的异步ajax请求库
浏览器和node都能使用
支持请求和响应拦截器（为我们书写更多逻辑提供方便）
支持请求取消
请求和响应数据转换
批量发送多个请求

axios的常用方法

##### axios.request(config)  等同于 axios（config）

##### axios.get(url[, config])    发get请求

##### axios.delete(url[, config])     发delete请求

##### axios.head(url[, config])    

##### axios.options(url[, config])

##### axios.post(url[, data[, config]])    发post请求
     
##### axios.put(url[, data[, config]])      发put请求

##### axios.patch(url[, data[, config]])

axios.create()

根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
新axios没有取消请求和批量发请求的方法，其他所有的语法都是一致的
为什么要设计这个语法？
1. 需求：项目中有部分接口与另一部分接口需要的配置不太一样
2. 解决：创建2个新axios，每个都有自己特有的配置，分别应用到不同要求的接口请求中

创建一个axios实例：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance是一个函数，并不是一个对象，如果大家学完源码就可以很清晰的了解它了

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你稍后需要移除拦截器，可以这样：

1 2	const myInterceptor = axios.interceptors.request.use(function () {/.../}); axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器。

1 2	const instance = axios.create(); instance.interceptors.request.use(function () {/.../});

以上就是axios基本的使用。

接下来我们开始测试，

参考地址：https://github.com/typicode/json-server

先创建一个json-server的文件，进入该文件夹，

执行：

1	npm i -g json-server

接着就是在json-server文件夹下面创建一个db.json,在该文件中加入以下内容：

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

然后就是启动服务：

1	json-server --watch db.json

值得注意的是，执行这个命令的时候，必须要在db.json文件夹下，不然会启动失败

之后你就可以直接在本地访问到信息了

coder-Tom

axios的基本知识

axios的基本使用

什么是axios？

axios的特点

axios的常用方法

axios.create()

axios拦截器