参考文档：https://gitee.com/hongjilin/hongs-study-notes/blob/master/%E7%BC%96%E7%A8%8B_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Ajax%E3%80%81Axios%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Axios%E5%85%A5%E9%97%A8%E4%B8%8E%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E7%AC%94%E8%AE%B0.md

1. json-server

json-server用于模拟服务端接口数据， 可以根据json数据建立一个完整的web服务。
参考文档：https://blog.csdn.net/weixin_39415598/article/details/122035661

1.1 安装json-server

安装：npm install -g json-server
查看版本号： json-server -v

1.2 创建db.json

  1. {
  2.   "posts": [
  3.     { "id": 1, "title": "json-server", "author": "typicode" }
  4.   ],
  5.   "comments": [
  6.     { "id": 1, "body": "some comment", "postId": 1 }
  7.   ],
  8.   "profile": { "name": "typicode" }
  9. }

1.3 启动json-serve

json-server —watch .\db.json

2. axios是什么

Axios，是一个基于promise的网络请求库， 作用域node.js和浏览器中， 同一套代码可以运行在浏览器和node.js中。在服务端它使用原生的node.js模块， 而在客户端（浏览器）则使用XMLHttpRequest。

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。
Axios本质上也是对XHR的封装， 只不过它是Promise的实现版本， 符合最新的ES规范。

3. axios的特点

  • 从浏览器创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据

  • 客户端支持防御XSRF

    4. axios常用方法

    4.1 get

    1. const btn = document.querySelectorAll('button')
    2. btn[0].onclick = function() {
    3. axios({
    4.   method: 'GET',
    5.   url: 'http://localhost:3000/posts',
    6. }).then((res) => {
    7.   console.log(res.data)
    8. })
    9. }

    4.2 post

    1. btn[1].onclick = function() {
    2.   axios({
    3.       method: 'POST',
    4.       url: 'http://localhost:3000/profile',
    5.       data:[
    6.           {name:'IRIC'},
    7.           {name:'OPPO'}
    8.       ]
    9.   }).then((res) => {
    10.       console.log(res.data)
    11.   })
    12. }

    4.3 PUT

    1. btn[2].onclick = function () {
    2.   axios({
    3.       method: 'PUT',
    4.       url: 'http://localhost:3000/posts/3',
    5.       data: {
    6.           id: 3,
    7.           title: 'REact',
    8.           author: 'node',
    9.       },
    10.   }).then((res) => {
    11.       console.log(res.data)
    12.   })
    13. }

    4.4 DELETE

    1. btn[3].onclick = function () {
    2.    axios({
    3.        method: 'DELETE',
    4.        url: 'http://localhost:3000/posts/3',
    6.    }).then((res) => {
    7.        console.log(res.data)
    8.    })
    9. }

    5. axios的其他使用方法

  • axios(config): 通用/最本质的发任意类型请求的方式

  • axios(url[, config]): 可以只指定 url 发 get 请求
  • axios.request(config): 等同于 axios(config)
  • axios.get(url[, config]): 发 get 请求
  • axios.delete(url[, config]): 发 delete 请求
  • axios.post(url[, data, config]): 发 post 请求
  • axios.put(url[, data, config]): 发 put 请求
  • axios.defaults.xxx: 请求的默认全局配置
  • axios.interceptors.request.use(): 添加请求拦截器
  • axios.interceptors.response.use(): 添加响应拦截器
  • axios.create([config]): 创建一个新的 axios(它没有下面的功能)
  • axios.Cancel(): 用于创建取消请求的错误对象
  • axios.CancelToken(): 用于创建取消请求的 token 对象
  • axios.isCancel(): 是否是一个取消请求的错误
  • axios.all(promises): 用于批量执行多个异步请求

  • axios.spread(): 用来指定接收所有成功数据的回调函数的方法 ```javascript //get btn[0].onclick = () => { axios.request({ 

    1.    method: 'GET',
    2.    url: 'http://localhost:3000/posts',

    }).then(res => {

    1.    console.log(res)

    }) }

    btn[0].onclick = () => { axios.get(‘http://localhost:3000/posts',).then(res => {

    1.    console.log(res.data)

    }) }

    //post btn[0].onclick = () => { axios.post(‘http://localhost:3000/profile',{

    1.   name:"test"

    }).then(res => {

    1.   console.log(res.data)

    }) }

  1. <a name="yzmXX"></a>
  2. ## 5.1 axios config参数配置
  3. ```javascript
  4. const config =  {    
  5.     url: '/user', //请求地址
  6.     method: 'get', // default  请求类型
  7.     baseURL: 'https://some-domain.com/api/', //baseUrl基础路径    
  8.     transformRequest: [function (data, headers) { //对请求数据做处理， 把处理后的结果向服务器发送        
  9.         return data;
  10.     }],    
  11.     transformResponse: [function (data) { //对响应结果做一些处理，
  12.         return data;
  13.     }],    
  14.     headers: {'X-Requested-With': 'XMLHttpRequest'},//设置头信息
  15.     params: { //设定URL参数，
  16.         ID: 12345
  17.     },
  18.     paramsSerializer: { //对请求的参数做序列化， 转化为字符串
  19.         indexes: null
  20.     },
  21.     data: { //请求体设置 有2种形式 1.对象形式2. 字符串形式
  22.         firstName: 'Fred'
  23.     },
  24.     data: 'Country=Brasil&City=Belo Horizonte',
  25.     timeout: 1000, // default is `0` (no timeout) //超时时间
  26.     withCredentials: false, // default
  27.     adapter: function (config) {
  28.         /* ... */
  29.     },
  30.     auth: { //请求基础验证
  31.         username: 'janedoe',
  32.         password: 's00pers3cret'
  33.     },
  34.     responseType: 'json', // default
  35.     responseEncoding: 'utf8', // default
  36.     xsrfCookieName: 'XSRF-TOKEN', // default 安全设置
  37.     xsrfHeaderName: 'X-XSRF-TOKEN', // default 安全设置
  38.     onUploadProgress: function (progressEvent) { //上传时的回调
  39.     },    
  40.     onDownloadProgress: function (progressEvent) {//下载时的回调
  41.     },
  42.     maxContentLength: 2000,
  43.     maxBodyLength: 2000,
  44.     validateStatus: function (status) {
  45.         return status >= 200 && status < 300; // default
  46.     },
  47.     maxRedirects: 21, // default  最大跳转次数
  48.     beforeRedirect: (options, { headers }) => {
  49.         if (options.hostname === "example.com") {
  50.             options.auth = "user:password";
  51.         }
  52.     },
  53.     socketPath: null, // default socket路径
  54.     httpAgent: new http.Agent({ keepAlive: true }),
  55.     httpsAgent: new https.Agent({ keepAlive: true }),
  56.     proxy: {//代理
  57.         protocol: 'https',
  58.         host: '127.0.0.1',
  59.         port: 9000,
  60.         auth: {
  61.             username: 'mikeymike',
  62.             password: 'rapunz3l'
  63.         }
  64.     },
  65.     cancelToken: new CancelToken(function (cancel) {
  66.     }),    
  67.     signal: new AbortController().signal,
  68.     decompress: true, // default
  69.     insecureHTTPParser: undefined, // default
  70.     transitional: {
  71.         silentJSONParsing: true, // default value for the current Axios version
  72.         forcedJSONParsing: true,
  73.         clarifyTimeoutError: false,
  74.     },
  75.     env: {
  76.         FormData: window?.FormData || global?.FormData
  77.     },
  79.     formSerializer: {
  80.         visitor: (value, key, path, helpers)=> {}; // custom visitor funaction to serrialize form values
  81.         dots: boolean; // use dots instead of brackets format
  82.         metaTokens: boolean; // keep special endings like {} in parameter key
  83.         indexes: boolean; // array indexes format null - no brackets, false - empty brackets, true - brackets with indexes
  84.     }
  85.  }

5.2 原理图

1. axios的理解与使用 - 图1

5.3 axios.create(config)

  1. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置；
  2. 新axios只是没有取消和批量发送请求的方法， 其他所有语法都是一致的；
  3. 这个语法的作用：
    1. 需求： 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样，如何处理？
    2. 解决： 创建2个新axiso,每个都有自己特有的配置， 分别应用到不同要求的接口请求中。
      1. //创建实例对象  /getJoke
      2. const duanzi = axios.create({
      3. baseURL: 'https://api.apiopen.top',
      4. timeout: 2000
      5. });
      6. const onather = axios.create({
      7. baseURL: 'https://b.com',
      8. timeout: 2000
      9. });
      10. //这里  duanzi 与 axios 对象的功能几近是一样的
      11. // duanzi({
      12. //     url: '/getJoke',
      13. // }).then(response => {
      14. //     console.log(response);
      15. // });
      16. duanzi.get('/getJoke').then(response => {
      17. console.log(response.data)
      18. })

      5.4 配置默认的配置

      ```javascript //默认配置 axios.defaults.method = ‘GET’;//设置默认的请求类型为 GET axios.defaults.baseURL = ‘http://localhost:3000';//设置基础 URL axios.defaults.params = {id:100}; axios.defaults.timeout = 3000;//

btns[0].onclick = function(){ axios({ url: ‘/posts’ }).then(response => { console.log(response); }) }

  1. <a name="YpVnk"></a>
  2. # 6. 请求拦截与请求响应
  3. :::success
  5. 1. 说明： 调用**axios()**并不是立即发送**ajax**请求， 而是需要经过一个较长的**流程**
  6. 2. 流程： 请求拦截器2 =》 请求拦截器1=》响应拦截器1=》响应拦截器2 =》请求的回调
  7. 3. 注意： 此流程是通过**promise串联**起来的， 请求**拦截器**的是**config**, **响应拦截器**的是**response**
  8. :::
  9. ```javascript
  10. <script>
  11.     const btn = document.querySelectorAll('button')
  12.     axios.interceptors.request.use(
  13.         (config) => {
  14.             console.log('请求拦截成功---1号')
  15.             return config
  16.         },
  17.         (error) => {
  18.             console.log('请求拦截失败---1号')
  19.         }
  20.     )
  21.     axios.interceptors.response.use(
  22.         (res) => {
  23.             console.log('响应拦截成功---1号')
  24.             console.log(res)
  25.             return res
  26.         },
  27.         (error) => {
  28.             console.log('响应拦截器失败 ----1号', error)
  29.         }
  30.     )
  31.     axios.defaults.tomeout = 3000
  32.     btn[0].onclick = () => {
  33.         axios.get('http://localhost:3000/posts').then((res) => {
  34.             console.log(res)
  35.         })
  36.     }
  37. </script>

7. 取消请求

  1. 基本流程 cancelToken对象
  2. 缓存用于取消请求的cancel函数
  3. 在后面特定时机调用cancel函数取消请求
  4. 在错误回调中判断如果error是cancel,做相应处理
  5. 实现功能，点击按钮，取消某个蒸菜请求中的请求
  6. 实现功能点击按钮，取消某个正在请求中的请求
  1.   const btn = document.querySelectorAll('button')
  2.     let cancel = null //声明全局变量
  3.     //发送请求
  4.     btn[0].onclick = () => {
  5.         console.log(1231321)
  6.         //判断上一次的请求是否已经完成
  7.         if (cancel !== null) {
  8.             cancel()
  9.         }
  10.         axios({
  11.             method: 'GET',
  12.             url: 'http://localhost:3000/posts',
  13.             // 1. 添加配置对象的属性
  14.             cancelToken: new axios.CancelToken((c) => {
  15.                 //2.将c的值赋值给cancel
  16.                 cancel = c
  17.             }),
  18.         }).then((res) => {
  19.             //将cancel的值初始化
  20.             cancel = null
  21.             console.log(res)
  22.         })
  23.     }

如果存在未完成的请求， 继续请求的时候， 会把上一次的 请求取消掉。
image.png