axios相应

一.axios哀求设置项(axios在调用时所吸取的参数对象）

以下是哀求时可用的设置选项，只有url是必须的，假如没有指定method，哀求将默认使用get方法
{
  // `url` 是用于哀求的服务器 URL
  url: "/user",

  // `method` 是创建哀求时使用的方法
  method: "get", // 默认是 get

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

  // `transformRequest` 答应在向服务器发送前，修改哀求数据
  // 只能用在 "UT", "OST" 和 "ATCH" 这几个哀求方法
  // 反面数组中的函数必须返回一个字符串，或 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` 是作为哀求主体被发送的数据
  // 只实用于这些哀求方法 "UT", "OST", 和 "ATCH"
  // 在没有设置 `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) {
  })
}

二.axios哀求的相应结构 

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

  // `status`  HTTP 状态码
  status: 200,

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

  // `headers` 服务器相应的头
  headers: {},

  // `config` 是为哀求提供的设置信息
  config: {}
}
三.axios的默认设置 

将一些重复的设置设置在默认设置里，简化代码
1.全局的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';
2.自界说实例默认设置
 
// 创建实例时设置设置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
四.创建实例对象 

长处：必要向差别服务器发送哀求时，可以调用差别对象来举行利用

2. // 创建实例对象
3. const duanzi = axios.create({
4.   baseURL:'https://api.apiopen.top',
5. });
7. // 这里duanzi与axios对象功能近乎一样
8. duanzi({
9.   url:'getJoke'
11. }).then(response =>{
12.   console.log(response);
13. })
14. console.log(duanzi)
17. //另一种方法
18. duanzi.get('/getJoke').then(response =>{
19.   console.log(response.data)
20. })

复制代码

五.拦截器（一些函数）

分为两大类：哀求拦截器，相应拦截器
1，哀求拦截器，发送哀求之前，借助一些函数对哀求参数和内容作一些处置惩罚和检测，假如都没有题目，然后发送哀求；假如有题目，制止发送。
// 添加哀求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送哀求之前做些什么
    return config;
  }, function (error) {
    // 对哀求错误做些什么
    return Promise.reject(error);
  });

2.相应拦截器 
// 添加相应拦截器
axios.interceptors.response.use(function (response) {
    // 对相应数据做点什么
    return response;
  }, function (error) {
    // 对相应错误做点什么
    return Promise.reject(error);
  }); 
体现哀求拦截器乐成，再是相应拦截器乐成。假如哀求拦截器失败，那么相应拦截器肯定失败。末了才是发送哀求
3.两个哀求拦截器，两个相应拦截器。实际次序先是哀求拦截器2 ，1，再是相应拦截器 1，2

4.在哀求拦截器中可以对config设置对象举行修改，在相应拦截器中可以对response结果举行修改

2. // 设置请求拦截器
3. axios.interceptors.request.use(function (config){
4.   console.log('请求拦截器成功1号')
6.   config.params = {a:100} //对params对象进行修改
8.   return config;
9. },function (error) {
10.   console.log('请求拦截器失败1号');
11.   return Promise.reject(error);
12. });
15. axios.interceptors.request.use(function (config){
16.   console.log('请求拦截器成功2号')
18.   config.timeout = 2000; //设置timeout
20.   return config;
21. },function (error) {
22.   console.log('请求拦截器失败2号');
23.   return Promise.reject(error);
24. });

复制代码

2. axios.interceptors.response.use(function (response) {
3.   console.log('响应拦截器成功1号')
5.   return response.data //对响应拦截器处理，只返回响应体，响应头和相应行都不返回
7. },function(error) {
8.   console.log('响应拦截器失败1号')
9.   return Promise.reject(error);
10. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金