模块开发之axios使用（二）

一时失言乱红尘 2022-05-22 07:04 214阅读 0赞

## 前端模块开发之axios使用（二） ##

*   *  前端模块开发之axios使用（二）
 *  前言
 *  使用
    
     *  安装
     *  get请求
        
         *  方式一
         *  方式二
     *  方式三
     *  delete请求
     *  POST请求
        
         *  方式一
     *  方式二
        
         *  put语法
         *  并发
         *  其它语法
 *  配置config
 *  response结构体数据
 *  全局的 axios 默认值
 *  拦截器
    
     *  请求拦截器
     *  响应拦截器
     *  移除拦截器
 *  axios与Promis结合使用
    
     *  promise是什么
        
         *  基本使用方法
     *  axios与Promise怎么一起使用

# 前言 #

axios是个网络http请求的模块，与普通的网络请求大同小异。  
axios只是语法上的学习,逻辑上涉及的不深,单单看语法,一遍你就看懂了.  
[Axios中文文档][Axios]

# 使用 #

## 安装 ##

命令

npm i axiso

模块引用

import axios from "axios";

## get请求 ##

语法如下：`axios.get(url[,config])`

### 方式一 ###

请求参数拼接在url里  
示例

axios.get('/login?username=cy')
    .then(function(respone){ 
        console.log(response);
    })
    .catch(function(error){ 
        console.log(error);
    });

请求参数拼接在url里，使用then获取respone返回数据，catch捕获异常情况。

### 方式二 ###

参数与url拆分开,放在config里，config是请求结构体

axios.get('/login',{
        params:{
            username:cy
        }
    })
    .then(function(respone){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    });

注意参数放在params对象里，区分post请求的data对象。

## 方式三 ##

axios基本的请求

axios.request({
        method:'get',
        url:'/login',
        params:{
         username:cy
        }
    }).then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    });

## delete请求 ##

语法如下:`axios.delete(url[,config])`  
delete与get语法一样,有3种语法方式

## POST请求 ##

语法如下：`axios.post(url[,data[,config]])`

### 方式一 ###

示例中,post第2个参数是data数据,如果有第三个数据,则是config

axios.post('/login',{
        username:'cy',
        pwd:'123'
    })
    .then(function(response){ 
        console.log(response);
    })
    .catch(function(error){ 
        console.log(error);
    });

## 方式二 ##

基本的请求

axios.request({
        method:'post',
        url:'/login',
        data:{
            username:cy,
            pwd:123
        }
    }).then(function(response){ 
        console.log(response);
    })
    .catch(function(error){ 
        console.log(error);
    });

注意post里数据放在data对象里。

### put语法 ###

语法如下:`axios.put(url[,data[,config]])`  
put使用方式与post一样,见post

### 并发 ###

语法助手函数

axios.all(iterable)
    
    axios.spread(callback)

示例

当2个请求都完成时,返回结果response按请求顺序放在axios.spread里面的函数里,如上面的acct与getUserAccount()对应,perms与getUserPermissions()对应,类似是response.

### 其它语法 ###

像head,patch极少使用.语法如下,自己看情况使用:

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

# 配置config #

上面的get,post里都用到过config,在config里能配置的参数如下:

{
      // `url` 是用于请求的服务器 URL
      url: '/user',
    
      // `method` 是创建请求时使用的方法
      method: 'get', // 默认是 get
    
      // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest` 允许在向服务器发送前，修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
      transformRequest: [function (data) { 
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
      transformResponse: [function (data) { 
        // 对 data 进行任意转换处理
    
        return data;
      }],
    
      // `headers` 是即将被发送的自定义请求头
      headers: {
       'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` 是即将与请求一起发送的 URL 参数
      // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
      params: {
        ID: 12345
      },
    
      // `paramsSerializer` 是一个负责 `params` 序列化的函数
      // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
      paramsSerializer: function(params) { 
        return Qs.stringify(params, {arrayFormat: 'brackets'})
      },
    
      // `data` 是作为请求主体被发送的数据
      // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
      // 在没有设置 `transformRequest` 时，必须是以下类型之一：
      // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // - 浏览器专属：FormData, File, Blob
      // - Node 专属： Stream
      data: {
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
      // 如果请求话费了超过 `timeout` 的时间，请求将被中断
      timeout: 1000,
    
      // `withCredentials` 表示跨域请求时是否需要使用凭证
      withCredentials: false, // 默认的
    
      // `adapter` 允许自定义处理请求，以使测试更轻松
      // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
      adapter: function (config) { 
        /* ... */
      },
    
      // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
      // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
      responseType: 'json', // 默认的
    
      // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
    
      // `onUploadProgress` 允许为上传处理进度事件
      onUploadProgress: function (progressEvent) { 
        // 对原生进度事件的处理
      },
    
      // `onDownloadProgress` 允许为下载处理进度事件
      onDownloadProgress: function (progressEvent) { 
        // 对原生进度事件的处理
      },
    
      // `maxContentLength` 定义允许的响应内容的最大尺寸
      maxContentLength: 2000,
    
      // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
      validateStatus: function (status) { 
        return status >= 200 && status < 300; // 默认的
      },
    
      // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
      // 如果设置为0，将不会 follow 任何重定向
      maxRedirects: 5, // 默认的
    
      // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
      // `keepAlive` 默认没有启用
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名称和端口
      // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
      // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
      proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: : {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` 指定用于取消请求的 cancel token
      // （查看后面的 Cancellation 这节了解更多）
      cancelToken: new CancelToken(function (cancel) { 
      })
    }

> 在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

# response结构体数据 #

{
      // `data` 由服务器提供的响应
     data: {},
    
      // `status` 来自服务器响应的 HTTP 状态码
     status: 200,
    
      // `statusText` 来自服务器响应的 HTTP 状态信息
     statusText: 'OK',
    
      // `headers` 服务器响应的头
     headers: {},
    
      // `config` 是为请求提供的配置信息
     config: {}
    }

# 全局的 axios 默认值 #

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';

# 拦截器 #

在请求之前或响应之前拦截请求,可以自定义处理数据逻辑.

## 请求拦截器 ##

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

## 响应拦截器 ##

var myInterceptor = axios.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        return response;
      }, function (error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      });

## 移除拦截器 ##

axios.interceptors.request.eject(myInterceptor);

# axios与Promis结合使用 #

## promise是什么 ##

说白了，以前异步执行是通过回调函数(比如successCallback成功回调函数，faileCallback失败函数)才完成执行后的逻辑处理，现在有了promise的话，可以通过promise里的resolve和reject2个方法决定执行成功还是失败的方法，具体后面会说。用promise包装的异常函数或对象都可以使用promise这个功能。  
Promise有方法列表  
![这里写图片描述][70]  
其中`all(), race(), reject() ,resolve()`都是属于`Promise类`的方法，`then() ,catch(), finally()`方法都是属于`类对象`的方法，通过对象去使用。

### 基本使用方法 ###

Promise是以接收一个异步执行函数为参数创建一个promise对象，根据resolve和reject决定then里执行的函数是哪一个。  
例子

执行会出现如下2种情况：

> "set timeout to: 1.3797299484025718 seconds."
    > "call reject()..."
    > "已失败:timeout in 1.3797299484025718 seconds."

或

> "set timeout to: 1.5394128937836098 seconds."
    > "call reject()..."
    > "已失败:timeout in 1.5394128937836098 seconds."

*  `Promise`接收一个异步函数，这个函数有2个参数resolve和reject，其实这2个参数就是`Promise.resolve和Promise.reject`方法。
 *  `Promise`对象的`then`是个关键函数,then函数有2个参数，语法如下`p.then(onFulfilled, onRejected);`，第二个函数是可选的，可以不写。当执行`Promise.resolve()时，对应的方法是onFulfilled，时Promise.reject时，对应的方法是onRejected`。  
    `如果忽略针对某个状态的回调函数参数，或者提供非函数 (nonfunction) 参数，then 将创建一个没有经过回调函数处理的新 Promise 对象，这个新 Promise 只是简单地接受调用这个 then 的原 Promise 的终态作为它的终态。如果对应的回调函数不存在，那么当catch捕获异常存在的情况下会执行catch函数，否则啥都不做。`  
    \-`p.then(onFulfilled, onRejected);` 这两个函数都接受Promise对象传出的值作为参数。  
    Promise的其它方法可参考[Promise官方说明和示例][Promise]

总结  
`Promise`有4个关键方法  
静态的：`resolve()已完成，reject()已拒绝`  
对象的：`p.then(onFulfilled, onRejected);` ,`p.catch(onRejected);`  
`p.then(onFulfilled, onRejected);` 这两个函数都接受Promise对象传出的值作为参数。

## axios与Promise怎么一起使用 ##

上面介绍过axios语法了，以例子说明

import axios from 'axios'
    axios.get("/verify/cy").then(json=>{
              console.log("验证成功");
          },json=>{
              console.log("验证拒绝");
          }).catch(err=>{
              console.log("执行异常");
          })
      },

`axios.get`方法返回的是`AxiosPromise`对象，而`AxiosPromise`继承是`Promise`类。所以`axios.get`方法返回了一个`Promise`对象，后面的`then`其实是`Promise`的方法。`then`接收2个函数做`resolve`和`reject`的处理函数。`catch`捕获异常。  
其实上面的代码中除了get方法外，其它方法都是使用Promise的api。  
注意一点，如里`then`的第二个函数没写，那当执行`Promise.reject(data)`时，会被catch捕获，上面有介绍过。

[Axios]: http://blog.lee-cloud.xyz/post/1/Axios-zhong-wen-wen-dang
[70]: /images/20220522/7ee86f168492479ea912963814594fcd.png
[Promise]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then