axios请求的简单封装

小灰灰 2023-03-03 11:26 47阅读 0赞

创建一个axios.js文件

  1. import axios from 'axios';
  2. import baseUrl from '../utils/baseUrl';
  5. const config = {
  6.     baseURL: baseUrl() || "",
  7.     timeout: 60 * 1000, // Timeout
  8.     withCredentials: true, // Check cross-site Access-Control
  9.   };
  11. const request = axios.create(config);
  12. //http request 拦截器
  13. request.interceptors.request.use(
  14.     config => {
  15.         var token = sessionStorage.getItem("token", token);
  16.         if (token) {
  17.             //将token放到请求头发送给服务器,将tokenkey放在请求头中
  18.             // config.headers.token = token;
  19.             // config.headers.Authorization = `Bearer ${token}`;
  20.         } else {
  21.             // if (config.url.indexOf('login') == -1) {
  22.             //     // location.href = '/login'
  23.             // }
  24.         }
  25.         return config;
  26.     },
  27.     error => {
  28.         return Promise.reject(err);
  29.     }
  30. );
  33. //http response 拦截器
  34. request.interceptors.response.use(
  35.     response => {
  36.         if (response.data.code === 403) {
  37.             // Message.error(response.data.msg);
  38.             // location.href = '/login'
  39.             //其余错误状态处理 
  40.         } else {
  41.             return response;
  42.         }
  43.     },
  44.     error => {
  45.         // location.href = "/login"
  46.         return Promise.reject(error)
  47.     }
  48. )
  51. /**
  52.  * 封装get方法
  53.  * @param url
  54.  * @param data
  55.  * @returns {Promise}
  56.  */
  58. export function get(url, params) {
  59.     return new Promise((resolve, reject) => {
  60.         request.get(url , {
  61.             params: params
  62.         })
  63.             .then(response => {
  64.                 resolve(response.data);
  65.             })
  66.             .catch(err => {
  67.                 reject(err)
  68.             })
  69.     })
  70. }
  73. /**
  74.  * 封装post请求
  75.  * @param url
  76.  * @param data
  77.  * @returns {Promise}
  78.  */
  80. export function post(url, data) {
  81.     return new Promise((resolve, reject) => {
  82.         request.post(url, data)
  83.             .then(response => {
  84.                 resolve(response.data);
  85.             }, err => {
  86.                 reject(err)
  87.             })
  88.     })
  89. }
  91. /**
  92.  * 封装put请求
  93.  * @param url
  94.  * @param data
  95.  * @returns {Promise}
  96.  */
  98. export function put(url, data) {
  99.     return new Promise((resolve, reject) => {
  100.       request.put(url, data)
  101.         .then(response => {
  102.           resolve(response.data)
  103.         }).catch(err => {
  104.         reject(err)
  105.       })
  106.     })
  107.   }

在main.js引入import { get, post,put } from ‘./js/axios’

  1. import { get, post,put } from './js/axios'
  3. Vue.prototype.$get = get;
  4. Vue.prototype.$post = post;
  5. Vue.prototype.$put = put;

在需要请求的页面自己this.$请求方(‘url’,参数).then()

发表评论

表情：
评论列表 （有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-封装axios请求

    最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

    超、凢脫俗超、凢脫俗/ 0 赞/ 113 阅读