axios

开始

​ 一个基于promise可以用于浏览器和node.js的网络请求库，可以允许在浏览器和node中。在node中使用http模块，在浏览器中使用ajax，使用 pnpm add axios 进行安装

基础

axios实例

​ 一般来说我们都通过axios实例来调用其方法。先创建一个实例配置参数，然后将这个实例导出，示例如下

const instance = axios.create({
   // 这里设置一些通用配置，下面列举了可配置选项。更多的请参考官网
    
  // `url` 是用于请求的服务器 URL，
  url: '/user',	

  // 默认值， `method` 是创建请求时使用的方法
  method: 'get', 

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',


  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },


  // `data` 是作为请求体被发送的数据
  data: {
    firstName: 'Fred'
  },
  

  // `timeout` 指定请求超时的毫秒数。
  timeout: 1000, // 默认值是 `0` (永不超时)

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

})



export default instance		// 导出实例

---

列举实例方法

​ 下面列举了axios的实例方法，实例方法也可以配置，如下

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])

// config就是实例化axios的那个配置，可以参考上面那个，这里进行第二次配置，会覆盖实例的配置
// 注：在使用别名方法时， url、method、data 这些属性都不必在配置中指定



/*
实例方法返回的结果是一个promise，可以通过then,catch，获取，或者通过await/async 获取

axios.get('/user?ID=12345').then().catch()

async function getUser() {
 const response = await axios.get('/user?ID=12345');
}

*/

get

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')


// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
})

post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
});


Promise.all(xxx1,xx2)				// 由于返回的是promise 可以使用promise的一些api，比如any，all
  .then(function ([acct, perm]) {
    // ...
});

其他的实例方法都类似

响应结构(response)

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}


axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.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';


-----------------------------------------------------------------------------------------------


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



------------------------------------------------------------------------------------------------


// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();

// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;

// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

拦截器

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

request

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

response

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

请求体编码

application/x-www-form-urlencoded

​ 是axios默认的选项，在浏览器中可以使用 URLSearchParams API 示例如下

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

其实吧，如果请求头header content-type: 'application/x-www-form-urlencoded' 存在会自动编码的，示例如下

const data = {;

await axios.post('https://postman-echo.com/post', 
              {
              		name: '张三',
              		age: 21
             },
      		 {
      				headers: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }
             });

// 这样写的话无需手动编码data

multipart/form-data

​ 这种格式一般用于传输二进制文件和其他类型混合的数据，实例如下

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

axios.post('https://example.com', form)

或者提供内置的方法 postForm

axios.postForm('https://httpbin.org/post', {
  my_field: 'my value',
  my_buffer: new Blob([1,2,3]),
  my_file:  fileInput.files // FileList will be unwrapped as sepate fields
});

其实吧，如果请求头header content-type: 'multipart/form-data' 存在会自动编码的，示例如下

axios.post('https://httpbin.org/post', {
  user: {
    name: 'Dmitriy'
  },
  file: fs.createReadStream('/foo/bar.jpg')
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(({data})=> console.log(data));

Axios支持以下别名方法：postForm，putForm，patchForm，这些方法只是对应的 HTTP 方法，其 content-type 头部默认设为multipart/form-data

// FileList 对象可以被直接传递：
await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files)

// 所有文件将使用相同的字段名files[]发送