vue3中axios的简单封装

1.引入axios

npm install axios

2.在src目录下新建request文件夹用来存放对axios的封装文件

3. request文件夹下新建index.js文件和apis文件夹，其中index.js文件用来编写简单的封装内容，apis文件夹用来存储接口api

4.index.js文件代码如下：

import axios from 'axios'

// 创建一个 axios 实例
const service = axios.create({
	baseURL: '', // 所有的请求地址前缀部分
	timeout: 60000, // 请求超时时间毫秒
	withCredentials: true, // 异步请求携带cookie
	headers: {
		// 设置后端需要的传参类型
		'Content-Type': 'application/json',
		'token': 'your token',
		'X-Requested-With': 'XMLHttpRequest',
	},
})

// 添加请求拦截器
service.interceptors.request.use(
	function (config) {
		// 在发送请求之前做些什么
		return config
	},
	function (error) {
		// 对请求错误做些什么
		console.log(error)
		return Promise.reject(error)
	}
)

// 添加响应拦截器
service.interceptors.response.use(
	function (response) {
		console.log(response)
		// dataAxios 是 axios 返回数据中的 data
		const dataAxios = response.data
		// 这个状态码是和后端约定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		console.log(error)
		return Promise.reject(error)
	}
)

export default service

 5.apis文件夹下的文件撰写，代码如下：

// 导入axios实例
import httpRequest from '@/request/index'
// get请求用params,post请求用data
//导出api方法
export function shopAdd(param) {
    return httpRequest({
		url: '/Data/goods.ashx?Action=goodsAdd',
		method: 'get',
		params: param,
	})
}

6.简单的使用

//引入api
import { userLogin } from '../../request/apis/user'

export default {
       //调用
        const login = () => {
            userLogin(user).then((res) => {
                console.log(res);
                if(res.code == '100'){
                    localStorage.setItem("id",res.Rows[0].id)
                    localStorage.setItem("account",res.Rows[0].account)
                    localStorage.setItem("shop_name",res.Rows[0].shop_name)
                    ElMessage.success('登录成功！')
                    setTimeout(function () {
                    router.push({
                        path: '/index',
                    })
                }, 2000)
                }else{
                    ElMessage.error(res.message)
                }
            })
        }
        return {  login }
    },
}