axios配置对象说明 —— Request Config

本文详细介绍了Axios的Request Config,包括URL、方法、数据、headers等关键配置项,帮助理解如何定制HTTP请求。
摘要由CSDN通过智能技术生成
Request Config
这些是发出请求的可用配置选项。只有url是必需的。请求将默认为GET如果method未指定。
{
   
  // `url`指明给谁发送请求
  url: '/user',

  // `method`设置请求的类型
  method: 'get', // default 默认get请求

  // `baseURL`设置url的基础结构,axios内部会自动将url和baseURL做一个路径结合,形成最终的url结构
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest`对请求数据做一个处理,处理完之后将处理后的结果向服务器发送
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data
    return data;
  }],

  // `transformRequest`可以对响应的结果做一些改变,改变之后再用自定义回调去处理结果
  // `transformResponse` 允许在响应数据之前更改
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

  // `headers` 在某些项目中进行身份校验的时候要求在请求头信息中加入一些特殊的标识,来检验请求是否满足条件
  headers: {
   'X-Requested-With': 'XMLHttpRequest'},

  // `params` 简化传递url参数流程
  params: {
   
    ID: 
要在Vue项目中全局配置axios和路由,可以按照以下步骤进行: 1. 安装axios和vue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件,用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头中 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 在登录成功后返回当前页面,这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: alert('登录过期,请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误,直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js中引入config.js文件,并将axios和router挂载到Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值