axios知识总结-MLHITRE

文章目录

#介绍
一，基本使用
二，创建实例
三，请求配置项
四，响应体结构
五，拦截器
六，取消请求
七，请求体编码

#介绍

axios是一个promise网络请求库，可以用于浏览器和node.js中。它在服务端使用原生node.js原生的http模块，在客户端使用XMLHttpRequests。

#安装
pnpm install axios

一，基本使用

//正常promise式用法
axios.get('/user')
  .then(function (response) {
    // 处理成功情况
  })
  .catch(function (error) {
    console.log(error.toJSON());//toJSON()可以获取更多HTTP请求的信息
  })
  .then(function () {
    // 总是会执行
  });

//async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user');
  } catch (error) {    //处理失败情况
  }finally{
    //无论请求对错都会执行的部分
  }
}

当你想一次性请求多个地址时，即发送多个并发请求时：

function getUserAccount() {
  return axios.get('/user');
}
function getUserPermissions() {
  return axios.get('/user/permission');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) { //会将数据放在一个结果数组里
    const acct = results[0];
    const perm = results[1];
  });

二，创建实例

实例相当于创建一个原始模板，我们请求的时候会带上实例的配置项。

const instance = axios.create({
  baseURL: 'https://127.0.0.1', //基地址，我们写的url前面会自带这个地址，一般我们实例就喜欢这么干
  timeout: 1000,  //请求超时
});
//这样用
instance.get(
{
    url:'/login', //真正请求的地址http://127.0.0.1/login
    xxx
})

这里说一个叫默认配置的东西：

我们可以指定默认配置，这个将作用在全局所有请求上，不像实例，实例是只作用在他的使用请求上的。

axios.defaults.baseURL = 'https://api.example.com';

优先级：具体请求中的配置项>实例中的配置项>默认配置项

三，请求配置项

{
  url: '/user',
  method: 'get', // 请求方法，默认为get
  
  //baseURL将自动加在url前面，除非url是一个绝对URL（http://xxx）。
  baseURL: 'https://some-domain.com/api/',
   
  //transformRequest定义在向服务器发送请求前对请求参数进行一定处理的函数
  //只能用于 'PUT', 'POST' 和 'PATCH' 
  //函数必须返回一个字符串，或 ArrayBuffer（二进制数组，基本用不到），或 Stream（流文件），注意函数放在一个数组里
  transformRequest: [function (data, headers) {
    return data;
  }],

  //transformResponse在传递给 then/catch 前，处理一下响应数据
  transformResponse: [function (data) {
    return data;
  }],

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

  //参数，必须是一个简单对象或 URLSearchParams 对象（后者可忽略，基本用不到）
  params: {
    ID: 12345
  },

  //序列化params，我们params会被解析成字符串加在url后面。在解析的过程中，我们会对字符串encode，但是对于一些特殊字符串比如@、+等却并不转义，因为axios库默认的解析规则不会转义他们，所以我们可以自己配置序列化规则。
  paramsSerializer: function (params) {
    return qs.stringify(params, {arrayFormat: 'brackets'})
  },

  //data是请求体请求数据，不会出现在url中
  //仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
      username:'lcy',
      password:123456
  },
  
  // 发送请求体数据的可选语法,暂时不知道干啥的
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // 指定请求超时的毫秒数，如果超时会被中断
  timeout: 1000, // 默认值是0，永不超时

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

  // 自定义处理请求，可以模拟测试请求结果。
  // 返回一个 promise 并提供一个有效的响应
  // 参考https://www.jianshu.com/p/46b4299ab77d
  adapter: function (config) {
  },

  //auth表示应该使用HTTP基础验证，并且提供凭据，会设置一个Authorization,覆盖掉headers自定义的Authorization头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

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

  // 表示用于解码响应的编码 (Node.js 专属)
  // 注意：忽略responseType的值为 'stream'的情况和客户端请求的情况
  responseEncoding: 'utf8', // 默认值

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

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

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

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

  // node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // （仅Node）定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // 根据请求返回的HTTP状态码返回什么promise结果
  // 如果validateStatus返回true(或者设置为null或undefine)，则promise 将会 resolved，否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // 在node.js中要遵循的最大重定向数
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

  // 在node.js中使用的UNIX套接字
  // 比如'/var/run/docker.sock' 发送请求到 docker 守护进程
  // 只能指定socketPath或proxy
  // 若都指定，这使用socketPath
  socketPath: null, // default

  //定义http和https请求的代理情况是否保持活跃，默认关闭
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // auth表示应使用HTTP Basic auth连接到代理，并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
  // 代理服务器信息，可以使用false禁用代理
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  //不知道干啥的
  cancelToken: new CancelToken(function (cancel) {
  }),

  //指示响应头是否应解压缩，这是自动的，如果设置为true，还会删除content encoding标头
  decompress: true // 默认值
}

四，响应体结构

{
  //服务器响应数据
  data: {},
  //服务器响应的HTTP状态码
  status: 200,
  //服务器响应的 HTTP 状态信息
  statusText: 'OK',
  //响应头
  // 所有的header名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // axios请求的配置信息
  config: {},
  // 生成此响应的请求体样子（请求长啥样）
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

五，拦截器

在所有请求或者响应被then或者catch前拦截他们进行一些处理。

不同于transformRequest和transformResponse对单个请求的配置，这个是对所有请求的配置，当然也可以只针对一个axios实例。

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

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

//如果我想在移除它
const requestInterceptor = axios.interceptor.request.use(xxx)
axios.interceptors.request.eject(requestInterceptor)

六，取消请求

const controller = new AbortController();
// 取消请求
controller.abort()

七，请求体编码

默认情况下，axois是将js对象序列化为JSON,这样用（其实不用管）

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

李致知

axios知识总结

#介绍