axios的封装

最新推荐文章于 2024-07-25 22:35:58 发布

sa789ya

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量358

点赞数

分类专栏： vue基础项目配置 axios封装接口统一管理文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/sa789ya/article/details/120009182

版权

本文介绍了如何在Vue.js项目中封装axios以实现统一管理请求。通过在main.js中引入axios并挂载到vue原型，创建http服务和api接口文件，进行请求拦截、响应拦截以及接口管理。此外，还讲解了路径封装的方法，方便异步请求。

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

介绍: axios是promise对象是做数据请求的

它是单例模式如果不封装每次请求都要设置请求头,设置token 也是可以采取本地存储

但本地存储没有响应式功能

1.下载axios依赖

npm install axios -s

2.在main.js 引入

import axios from 'axios'

将它挂载到vue原型上

Vue.prototype.$axios=axios

3.在src 目录下创建一个http 文件夹在http里创建servece.js文件

首先引入axios
配置基地址
请求拦截
响应拦截

import axios from "axios"
import { Toast } from "vant"
// 根据环境不同引入不同api地址
import { baseUrl } from '@/config'
// create an axios instance
let service= axios.create({
  baseURL:baseUrl , // url = base api url + request url
//   withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
let loading;
// request 拦截器 request interceptor
service.interceptors.request.use(
  config => {