axios的详细学习

json-server的使用

json-server快速搭建HTTP服务，来与axios结合做实践。
https://github.com/typicode/json-server

• 第一步：安装json-server

npm install -g json-server

• 第二步：创建一个文件db.json，里面存放一些数据
  
• 第三步：启动json服务（注意此命令要在db.json终端打开，否则找不到路径）

npx json-server --watch db.json

axios

1.认识axios

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的github: https://github.com/axios/axios
axios中文文档：http://www.axios-js.com/zh-cn/docs/

2.特征

• 1）发送ajax请求
• 2）在node.js中发送HTTP请求
• 3）支持peomise的相关操作
• 4）支持请求或响应拦截器
• 5）对请求或响应的数据做转换
• 6）取消请求
• 7）自动将结果转化为json数据
• 8）做一些保护阻止跨站攻击
• 既能运行在node.js环境中，又能在浏览器端使用
• 基于promise的网络请求，能够解决回调地狱问题
• axios可以集成在vue以及react等框架中使用
• 占用的内存也会比较小

3.安装

CDN 国内服务器在bootcdn上找

• 使用npm

$ npm install axios

• 使用bower

$ bower install axios

• 使用CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//国内
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

4.axios的基本使用

4.1发送AJAX请求

   axios({
      method:GET/POST，//请求类型
      url:,//请求的地址 
  }).then(res => {
       console.log(res)
     })

4.2axios发送请求语法

• axios.request(config)

    axios.request({
        method:GET/POST,//请求方式
        url:,//请求地址
    }).then(res=>{
         cosnole.log(res)
        })

• 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]])
  在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

4.3axios响应结果的结构

4.4axios配置对象详细说明

url请求的地址
method请求方式
baseurl基本地址，会与url拼接起来
ransformRequest对请求的数据做处理，将处理后的结果向服务器发送
transformResponse对响应的结果做一些处理，我们用自定义的回调处理这个结果
params设置url的参数
paramsSerializer参数序列化，将请求的参数转化成字符串
data请求体（对向形式和字符串形式两种）
timeout超时时间
withCredentials跨域请求时设置携带的cookie
adapter设置请求的适配器
auth表示应该使用 HTTP 基础验证，并提供凭据
responseType 表示服务器响应的数据类型，默认是json

4.5全局设置默认配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4.6axios创建实例对象发送AJAX请求

数据不是来自单一的服务器，来自A、B两个服务器（应用场景）
以下请求不同的数据时可以使用不同的实例对象

//创建实例对象
   const a = axios.create({
       baseURL:'http://a.com',
       timeout:2000 
   });
   const b = axios.create({
       baseURL:'http://b.com',
       timeout:3000
   });
   //这里a   b与axios对象的功能几乎是一样的
   a({
       url:'/getData',
   }).then(res => {
         console.log(res)
        })
    b({
       url:'/getData',
   }).then(res => {
         console.log(res)
        })

5.拦截器

一些函数

5.1请求拦截器

在发送请求之前，可以借助一些回调，对请求的参数和内容检测，没有问题，发送请求；有问题，取消请求。

5.2响应拦截器

当服务器返回结果，响应拦截器在我们对返回的结果处理之前，先对这些结果预处理。

5.3拦截器实例

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么（可以修改config里的一些数据）
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么（可以设置返回哪些值）
    //例如：return response.data(这样在请求完接口自定义回调里就只能接收到data数据了)
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

6.axios取消请求

设置取消请求，三步

  //2.声明一个全局变量
  let cancel = null
  //btns[0]发送请求  btns[1]取消请求
  btns[0].onclick = function(){
     axios({
        method:'GET',
        url:'http://localhost:3000/posts',
        //1.添加配置对象的属性
        cancelToken:new axios.CanaelToken(function(c){
               //3.将c的值赋给cancel
                 // executor 函数接收一个 cancel 函数作为参数
               cancel = c
            })
    }).then(res => {
        console.log(res)
         })
 }

btns[1].onclick = function(){
  cancel();  //直接调用cancel，取消请求
}
   

每次点击发送请求时，判断上次的请求是否还在发送，如果还在发送就取消掉，进行本次发送，这样在连续点击发送请求时，减小服务器压力。

  //2.声明一个全局变量
  let cancel = null
  //根据cancel值判断上次请求是否结束
    if(cancel != null){
    //取消上一次请求
    cancel();
   }
    axios({
        method:'GET',
        url:'http://localhost:3000/posts',
        //1.添加配置对象的属性
        cancelToken:new axios.CanaelToken(function(e){
               //3.将e的值赋给cancel
               cancel = e
            })
    }).then(res => {
        console.log(res)
        cancel = null    //每次请求结束后将cancel的值回归最初值
         })