vue项目中使用axios请求数据，axios请求封装

vue项目中使用axios请求数据，axios请求封装

第一步，先下载axios依赖

npm i axios --save

第二步，创建service.js文件

// 引入axios
import axios from 'axios'

const service = axios.create({
        // baseURL会自动地加载到接口地址上
    baseURL: "http://127.0.0.1：8080"
        // 指定请求超时的毫秒数，请求花费的时间超过timeout，请求则会被中断
    timeout: 1000,
        // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: true, // default,
        // headers是即将被发送的自定义请求头
    headers: {
        'Content-type': 'application/json, charset=utf-8'
    },
})

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    const token = localStorage.getItem("token")
    if(token) {
      config.headers.token = token
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default service

第三步，在main.js里面引入

// 引入axios
import service from './service'
// service 挂载到Vue原型上面
Vue.prototype.service = service;

第四步，按需在对应的文件里面发送请求

this.service
	.get("/sxbywzDhlApi/listDtl?appTpwhLevel=eighth&appTpwhType=headerInfo")
	.then(res => {
		// 请求成功，状态值为200
		if (res.status == 200) {
			console.log(res.data)
		}
	})
	// 请求错误的返回
	.catch(err => {
		console.log(err);
	})
},

作者交流方式：2685141143，欢迎骚扰，一起探讨前端问题