vue-axios 拦截

2020-12-29 18:03:06 阅读：128 来源： 互联网

标签：function axios return url instance vue console 拦截

在src创建一个文件夹utils再创建request.js文件

import axios from 'axios' //导入axios

const instance = axios.create({
  baseURL: "https:api.cat-shop.penkuoer.com", //baseURL会在发送请求的时候拼接在url参数前面,在不同的生产环境中修改这个就行了
  timeout: 5000
})

//请求拦截
//所有的网络请求都会先走这个方法，我们可以在它里面为请求添加一些自定义的类容
instance.interceptors.request.use(
  function(config) {
    console.group("全局请求拦截");
    console.log(config);
    console.groupEnd();
    config.headers.token = '123456'; //在headers中添加token=123456
    return config
  },
  function(err) {
    return Promise.reject(err);
  }
);

//响应拦截
//所有的网络请求返回数据后都会先执行此方法
// 此处可以根据服务器的返回状态码做相应的数据，比如说404,401,50x
instance.interceptors.response.use(
  function(response) {
    console.group("全局响应拦截");
    console.log(response);
    console.groupEnd();
    return response;
  },
  function(err){
    return Promise.reject(err);
  }
);

export function get(url, params) { //封装get传入URL和params
  return instance.get(url, {
    params
  });
}

export function post(url, data) { //封装post传入URL和data
  return instance.post(url, data);
}

export function del(url) { //封装del传入URL
  return instance.delete(url);
}

export function put(url, data) { //封装put传入URL和params
  return instance.put(url, data);
}

标签：function,axios,return,url,instance,vue,console,拦截
来源： https://www.cnblogs.com/tingshengshiyu/p/14207994.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-axios 拦截