axios 的学习

今天药忘吃喽~ 2022-09-11 09:19 105阅读 0赞

### 文章目录 ###

*  一、axios 基本使用
 *  二、axios API
 *   *  2.1 axios(config)
     *  2.2 axios(url\[, config\])
     *  2.3 其他请求方法
     *  2.4 并发
     *  2.5 创建实例
     *  2.6 取消请求
     *  2.7 拦截器
 *  三、axios 请求配置
 *  四、响应格式
 *  五、配置默认值

# 一、axios 基本使用 #

`axios`是前端最流行的`ajax`请求库，基于`Promise`用于浏览器和`nodejs`的`HTTP client`，`react/vue`官方都推荐使用`axios`发`ajax`请求。

**特点：**

1.  基本`promise`的异步`ajax`请求库
2.  浏览器端／`node`端都可以使用
3.  支持请求／响应拦截器
4.  支持请求取消
5.  请求／响应数据转换
6.  批量发送多个请求

**安装：**

*  npm：`npm install axios`
 *  bower：`bower install axios`
 *  cdn：`<script src="https://unpkg.com/axios/dist/axios.min.js"></script>`

**基本使用：**

① 执行一个`GET`请求

> 注意: async/await 是 ECMAScript 2017 的一部分，不支持Internet Explorer和旧版浏览器，因此请谨慎使用。

② 执行一个`POST`请求

axios.post('/user', { 
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) { 
        console.log(response);
      })
      .catch(function (error) { 
        console.log(error);
      });

③ 执行多个并发请求

# 二、axios API #

## 2.1 axios(config) ##

// 发送一个POST请求
    axios({ 
      method: 'post',
      url: '/user/12345',
      data: { 
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    // GET请求远程图片
    axios({ 
      method:'get',
      url:'http://bit.ly/2mTM3nY',
      responseType:'stream'
    }).then(function (response) { 
      response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
    });

## 2.2 axios(url\[, config\]) ##

// 发送一个GET请求 (GET请求是默认请求方式)
    axios('/user/12345');

## 2.3 其他请求方法 ##

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>axios.request(config)</td> 
   <td>等同于 axios(config)</td> 
  </tr> 
  <tr> 
   <td>axios.get(url[, config])</td> 
   <td>发 get 请求</td> 
  </tr> 
  <tr> 
   <td>axios.delete(url[, config])</td> 
   <td>发 delete 请求</td> 
  </tr> 
  <tr> 
   <td>axios.post(url[, data, config])</td> 
   <td>发 post 请求</td> 
  </tr> 
  <tr> 
   <td>axios.put(url[, data, config])</td> 
   <td>发 put 请求</td> 
  </tr> 
 </tbody> 
</table>

## 2.4 并发 ##

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>axios.all(promises)</td> 
   <td>用于批量执行多个异步请求</td> 
  </tr> 
  <tr> 
   <td>axios.spread()</td> 
   <td>用来指定接收所有成功数据的回调函数的方法</td> 
  </tr> 
 </tbody> 
</table>

## 2.5 创建实例 ##

你可以使用自定义配置创建一个`axios`的新实例，`axios.create([config])`：

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

以下为可用的实例方法：

*  `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#getUri([config])`

## 2.6 取消请求 ##

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>axios.Cancel()</td> 
   <td>用于创建取消请求的错误对象</td> 
  </tr> 
  <tr> 
   <td>axios.CancelToken()</td> 
   <td>用于创建取消请求的 token 对象</td> 
  </tr> 
  <tr> 
   <td>axios.isCancel()</td> 
   <td>是否是一个取消请求的错误</td> 
  </tr> 
 </tbody> 
</table>

**基本流程**

*  配置`cancelToken`对象
 *  缓存用于取消请求的`cancel`函数
 *  在后面特定时机调用`cancel`函数取消请求
 *  在错误回调中判断如果`error`是`cancel`，做相应处理

**实现功能**

*  点击按钮，取消某个正在请求中的请求
 *  在请求一个接口前，取消前面一个未完成的请求

## 2.7 拦截器 ##

你可以拦截请求或者响应在他们被`then or catch`处理之前。

// 添加请求拦截器
    axios.interceptors.request.use(function (config) { 
        // Do something before request is sent
        return config;
      }, function (error) { 
        // Do something with request error
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) { 
        // Do something with response data
        return response;
      }, function (error) { 
        // Do something with response error
        return Promise.reject(error);
      });

当你需要删除拦截器时就能删掉：

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

你可以将拦截器添加到`axios`的自定义实例：

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

拦截器函数/ajax 请求/请求的回调函数的调用顺序：

1.  说明: 调用`axios()`并不是立即发送`ajax`请求，而是需要经历一个较长的流程
2.  流程: 请求拦截器2 => 请求拦截器 1 => 发`ajax`请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调
3.  注意: 此流程是通过`promise`串连起来的，请求拦截器传递的是`config`，响应拦截器传递的是`response`

# 三、axios 请求配置 #

{ 
      // `url` 是用来请求的服务器URL
      url: '/user',
    
      // `method` 是发请求时的请求方式
      method: 'get', // 默认是get
    
      // `baseURL` 会被加到`url`前面，除非`url`已经写全了。
      // 它可以方便的为axios实例设置`baseURL`，然后传递相关联的URLs给实例对应的方法
      baseURL: 'https://some-domain.com/api/',
    
      // `transformRequest`允许请求数据在发送到服务器之前对其进行更改
      // 仅适用于'PUT', 'POST', 'PATCH'
      // 数组中的最后一个函数必须返回一个string或者Buffer、ArrayBuffer、FormData或Stream的实例
      // 你可以修改headers对象.
      transformRequest: [function (data, headers) { 
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `transformResponse` 允许数据在传到then/catch之前对其进行更改
      transformResponse: [function (data) { 
        // Do whatever you want to transform the data
    
        return data;
      }],
    
      // `headers` 发送自定义headers
      headers: { 'X-Requested-With': 'XMLHttpRequest'},
    
      // `params` URL参数，必须做位一个普通对象或者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
      // - Browser only: FormData, File, Blob
      // - Node only: Stream, Buffer
      data: { 
        firstName: 'Fred'
      },
    
      // `timeout` 指定请求超时的时间，单位：毫秒
      // 如果请求的时间超过`timeout`, 请求即被中止
      timeout: 1000, // default is `0` (no timeout)
    
      // `withCredentials` 跨站点访问是否适用证书
      withCredentials: false, // 默认不使用
    
      // `adapter` 允许自定义处理请求，这使得测试更容易。
      // 返回一个promise并提供一个有效的响应 (see lib/adapters/README.md).
      adapter: function (config) { 
        /* ... */
      },
    
      // `auth` 使用HTTP认证, 并提供凭据。
      // 设置一个带`Authorization'的header，覆盖任何现有的用`headers`参数设置的`Authorization'自定义headers.
      auth: { 
        username: 'janedoe',
        password: 's00pers3cret'
      },
    
      // `responseType` 服务器将响应的数据类型，包括'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
      responseType: 'json', // default
    
      // `responseEncoding` 用于解码响应的编码方式
      // 注: 忽略`responseType`的'stream'，或者客户端请求
      responseEncoding: 'utf8', // default
    
      // `xsrfCookieName` 用作 xsrf 令牌的值的cookie的名称
      xsrfCookieName: 'XSRF-TOKEN', // default
    
      // `xsrfHeaderName` 携带xsrf令牌值的http header的名称
      xsrfHeaderName: 'X-XSRF-TOKEN', // default
    
      // `onUploadProgress` 允许处理上传的进度事件
      onUploadProgress: function (progressEvent) { 
        // Do whatever you want with the native progress event
      },
    
      // `onDownloadProgress` 允许处理下载的进度事件
      onDownloadProgress: function (progressEvent) { 
        // Do whatever you want with the native progress event
      },
    
      // `maxContentLength` 定义允许的http响应内容的最大bytes
      maxContentLength: 2000,
    
      // `validateStatus` 对于一个给定的HTTP响应状态码，是resolve 还是reject 这个promise。如果`validateStatus`返回`true` (或者 `null`,`undefined`), 这个promise will be resolved; 否则，这个promise will be rejected.
      validateStatus: function (status) { 
        return status >= 200 && status < 300; // default
      },
    
      // `maxRedirects` 在node.js中要遵循的重定向的最大数量。
      // 如果设为0，不会有重定向，默认5
      maxRedirects: 5, // default
    
      // `socketPath` 定义一个在node.js里面用的UNIX Socket。
      // e.g. '/var/run/docker.sock' 是发送请求到docker后台.
      // 只能指定`socketPath`和`proxy`中的一个。
      // 如果都被指定，按`socketPath`的生效。
      socketPath: null, // default
    
      // `httpAgent` and `httpsAgent` 在node.js中，分别执行http和https请求时使用的自定义代理。
      // 允许配置类似`keepAlive`这样在默认情况下不启用的选项。
      httpAgent: new http.Agent({  keepAlive: true }),
      httpsAgent: new https.Agent({  keepAlive: true }),
    
      // 'proxy' 定义代理服务器的主机名和端口。
      // 你也可以用常规的`http_proxy`和`https_proxy`环境变量来定义你的代理。
      // 如果给你的代理配置使用环境变量，你也可以定义一个不代理的`no_proxy`环境变量，内容是一个以逗号分隔的域名列表。
      // 设成`false`就禁用代理，忽略环境变量。
      // `auth`表示HTTP Basic auth会被用于连接到代理，并提供凭证。
      // 这将设置一个`Proxy-Authorization` header，覆盖先前`headers`参数里面设置的`Proxy-Authorization` 自定义headers。
      proxy: { 
        host: '127.0.0.1',
        port: 9000,
        auth: { 
          username: 'mikeymike',
          password: 'rapunz3l'
        }
      },
    
      // `cancelToken` 指定可用于取消请求的取消令牌
      // (详情参阅下面的消除部分)
      cancelToken: new CancelToken(function (cancel) { 
      })
    }

# 四、响应格式 #

{ 
      // `data` 提供服务器的响应
      data: { },
    
      // `status` 来自服务器响应的HTTP状态码
      status: 200,
    
      // `statusText` 来自服务器响应的HTTP状态消息
      statusText: 'OK',
    
      // `headers` 来自服务器响应的headers，所有header names都是小写
      headers: { },
    
      // `config` 提供了`axios`请求的配置
      config: { },
    
      // `request` 生成这个响应的请求
      // 这是node.js中最后的客户端请求实例(重定向)和浏览器XMLHttpRequest实例
      request: { }
    }

# 五、配置默认值 #

**① 全局 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';

**② 自定义实例默认值**

// 创建实例时设置默认配置
    const instance = axios.create({ 
      baseURL: 'https://api.example.com'
    });
    
    // 实例创建后改变默认配置
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

**③ 配置优先级顺序**

配置将按优先顺序改变，顺序是`lib/defaults.js`库中的默认值，然后是实例的 `defaults`属性，最后`config`请求的参数，后者的配置优先于前者生效。这里有一个例子：

// 使用库提供的配置默认值创建实例
    // 此时，timeout值为`0`，这是库的默认值
    const instance = axios.create();
    
    // 重写timeout的库默认值
    // 现在所有请求将在timeout前等待2.5秒
    instance.defaults.timeout = 2500;
    
    // 重写这个请求的timeout，因为知道它需要很长时间
    instance.get('/longRequest', { 
      timeout: 5000
    });