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` 允许在向服务器发送前,修改请求数据

// 只能用在 "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) {

})

}

二.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;

四.创建实例对象

好处:需要向不同服务器发送请求时,可以调用不同对象来进行操作

复制代码
// 创建实例对象
const duanzi = axios.create({
  baseURL:'https://api.apiopen.top',
});

// 这里duanzi与axios对象功能近乎一样
duanzi({
  url:'getJoke'

}).then(response =>{
  console.log(response);
})
console.log(duanzi)


//另一种方法
duanzi.get('/getJoke').then(response =>{
  console.log(response.data)
})

五.拦截器(一些函数)

分为两大类:请求拦截器,响应拦截器

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结果进行修改

javascript 复制代码
// 设置请求拦截器
axios.interceptors.request.use(function (config){
  console.log('请求拦截器成功1号')

  config.params = {a:100} //对params对象进行修改

  return config;
},function (error) {
  console.log('请求拦截器失败1号');
  return Promise.reject(error);
});


axios.interceptors.request.use(function (config){
  console.log('请求拦截器成功2号')

  config.timeout = 2000; //设置timeout

  return config;
},function (error) {
  console.log('请求拦截器失败2号');
  return Promise.reject(error);
});
javascript 复制代码
axios.interceptors.response.use(function (response) {
  console.log('响应拦截器成功1号')

  return response.data //对响应拦截器处理,只返回响应体,响应头和相应行都不返回

},function(error) {
  console.log('响应拦截器失败1号')
  return Promise.reject(error);
});
相关推荐
264玫瑰资源库18 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端29 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED35 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
普if加的帕43 分钟前
java Springboot使用扣子Coze实现实时音频对话智能客服
java·开发语言·人工智能·spring boot·实时音视频·智能客服
施嘉伟1 小时前
Oracle 11g RAC ASM磁盘组剔盘、加盘实施过程
数据库·oracle
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss