随笔—vue 封装请求（axios）第二篇

最新推荐文章于 2024-08-24 22:42:50 发布

哲丿爷

最新推荐文章于 2024-08-24 22:42:50 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端项目搭建

本文链接：https://blog.youkuaiyun.com/qq_35669348/article/details/87877268

vue 前端项目搭建专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Axios库封装HTTP请求，包括POST和GET方法，实现请求和响应拦截，处理超时和错误状态，以及如何在项目中引用和使用封装后的请求方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、封装get post 请求

首先肯定是要用个插件或者依赖我这用的axios

npm install axios -s

-s 是保存到生产环境

-d 是保存到开发环境

-g 是全局

运行之后你会发现package.json 加了个axios 的版本

现在来使用，直接上代码了，新建个文件夹，在弄个index.js 名字随意取

我这就随意封装了下，需要的根据实际需求封装代码如下

/* eslint-disable */
import axios from 'axios'

/**
* 定义请求常量
* TIME_OUT、ERR_OK
*/
export const TIME_OUT = 10000;    // 请求超时时间
export const ERR_OK = true;      // 请求成功返回状态，字段和后台统一
export const baseUrl = process.env.BASE_URL   // 引入全局url，定义在全局变量process.env中

// 请求超时时间
axios.defaults.timeout = TIME_OUT

// 封装请求拦截
axios.interceptors.request.use(
 config => {
  // let token = localStorage.getItem('token')   // 获取token
  config.headers['Content-Type'] = 'application/json;charset=UTF-8'
  config.headers['Authorization'] = ''
  // if(token != null){                          // 如果token不为null，否则传token给后台
  //   config.headers['Authorization'] = token
  // }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
// 封装响应拦截，判断token是否过期
axios.interceptors.response.use(
  response => {
    let {data} = response
    if (data.message === 'token failure!') {    // 如果后台返回的错误标识为token过期，则重新登录
      localStorage.removeItem('token')          // token过期，移除token
      // 进行重新登录操作
    } else {
      return Promise.resolve(response)
    }
  },
  error => {
    return Promise.reject(error)
  }
)
// 封装post请求
export function fetchPost(requestUrl, params = '') {
  return axios({
    url: requestUrl,
    method: 'post',
    data: {
      'body': params
    }
  })
}
// 封装post请求
export function fetchGet(requestUrl, params = '') {
  return axios({
    url: requestUrl,
    method: 'get',
    data: {
      'body': params
    }
  })
}

现在就说怎么用：