Vue3第八篇：集成axios

文子阳

已于 2022-07-17 00:32:11 修改

阅读量1.5k

点赞数

分类专栏： vue Vue3 文章标签： npm vue.js 前端

于 2022-06-14 12:06:10 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/125275586

版权

vue 同时被 2 个专栏收录

101 篇文章 24 订阅

订阅专栏

42 篇文章 13 订阅

订阅专栏

本文介绍了如何使用Yarn安装axios和qs库，配置axios实例以进行参数处理，并创建API模块进行用户操作接口。同时，展示了如何在Vite中设置反向代理以解决跨域问题。关键点包括请求拦截、响应拦截和API接口设计。

摘要由CSDN通过智能技术生成

1.安装

yarn add axios

yarn add qs

2.配置，创建utils文件夹，创建request.js 配置文件内容如下：（里面对token的Key和返回值的预处理需要根据实际情况来修改）

import axios from 'axios'
import qs from 'qs'
import { ElMessage } from 'element-plus'
/**
 * axios的传参方式：
 * 1.url 传参 一般用于Get和Delete 实现方式：config.params={JSON}
 * 2.body传参 实现方式：config.data = {JSON}，且请求头为：headers: { 'Content-Type': 'application/json;charset=UTF-8' }
 * 3.表单传参 实现方式：config.data = qs.stringify({JSON})，且请求头为：且请求头为：headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
 */
// axios实例
const service = axios.create({
	baseURL: import.meta.env.VITE_BASE_URL,
	timeout: 60000,
	headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})

// 请求拦截器
service.interceptors.request.use(
	(config) => {
		// 追加时间戳，防止GET请求缓存
		if (config.method?.toUpperCase() === 'GET') {
			config.params = { ...config.params, t: new Date().getTime() }
		}
		
		if (Object.values(config.headers).includes('application/x-www-form-urlencoded')) {
			config.data = qs.stringify(config.data)
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)

// 响应拦截器
service.interceptors.response.use(
	response => {
		if (response.status !== 200) {
			return Promise.reject(new Error(response.statusText || 'Error'))
		}

		const res = response.data
		// 响应成功 TODO 这里要填上业务成功的状态码
		if (res.code === 200) {
			return res
		}

		// 错误提示
		ElMessage.error(res.msg)

		return Promise.reject(new Error(res.msg || 'Error'))
	},
	error => {
		ElMessage.error(error.message)
		return Promise.reject(error)
	}
)

// 导出 axios 实例
export default service

3.使用

新建api文件夹，新建user.js存放访问用户相关的接口，每个名称建议采用：useXxxApi格式，如下：

import service from "@/utils/request";

export const useAddApi = (data) => {
    return service.post('/generatorDatabase/add', data)
}

export const useDeleteApi = (data) => {
    return service.post('/generatorDatabase/delete', data)
}

export const useDeletesApi = (data) => {
    return service.post('/generatorDatabase/deleteByIds', data)
}

export const useUpdateApi = (data) => {
    return service.post('/generatorDatabase/update', data)
}

export const useGetByIdApi = (data) => {
    return service.post('/generatorDatabase/getById', data)
}

export const useGetListApi = (data) => {
    return service.post('/generatorDatabase/getList', data)
}

使用

import { useGetListApi} from '@/api/generatorDatabase'


function getList() {
    useGetListApi().then(res => {
        console.log(res.data)
    })
}

4.配置反向代理修改vite.config.js

export default defineConfig({
  // 本地反向代理解决浏览器跨域限制
  server: {
    host: 'localhost',
    port: 3000,
    open: false, // 启动是否自动打开浏览器
    proxy: {
      ['/api']: {
        target: 'http://真实地址', //
        changeOrigin: true,
        log: 'debug',
        rewrite: path => {
          return path.replace(new RegExp('^' + '/api'), '')
        }
      }
    }
  },
}

注意：1.在请求接口的时候要带上“/api”前缀。

2.baseUrl配置成localhost:你的启动端口