vue配置axios封装接口

使用npm安装axios

npm install axios

src/utils/request.js 请求头 ，请求拦截器，响应拦截器

import axios from axiosconst service = axios.create({baseURL: process.env.BASE_API,timeout: 3 * 1000})service.interceptors.request.use(config => {config.data = JSON.stringify(config.data);config.headers = {// Content-Type: application/x-www-form-urlencoded //配置请求头Content-Type: application/json;charset=UTF-8 //配置请求头}return config}, error => {Promise.reject(error)})//4.导入文件export default service

src/utils/http.js 导入封装好的axios实例

// 导入封装好的axios实例import request from ./requestconst http = {/*** methods: 请求* @param url 请求地址 * @param params 请求参数*/get(url, params) {const config = {method: get,url: url}if (params) config.params = paramsreturn request(config)},post(url, params) {const config = {method: post,url: url}if (params) config.data = paramsreturn request(config)},put(url, params) {const config = {method: put,url: url}if (params) config.params = paramsreturn request(config)},delete(url, params) {const config = {method: delete,url: url}if (params) config.params = paramsreturn request(config)}}//导出export default http

src/api/api.js 这里就是所有封装的请求接口。可以根据自己的 地址去自己写。再自定义个方法名。这样用的时候直接导入api.js文件即可

import http from ../utils/http/*** @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...* @param /testIp代表vue-cil中config，index.js中配置的代理*/let resquest = "http://xxx.xxx.xxx.xxx:8090/api" //xxx的地方是后端ip// 通过姓名获取员工信息export function racerNameTabelAPI(params) {return http.get(`${resquest}/racer/name`, params)}//通过姓名获取员工信息export function racerQueryTabelAPI(params) {return http.get(`${resquest}/racer/query`, params)}//修改员工信息export function racerUpdateAPI(params) {return http.post(`${resquest}/racer/update`, params)}//查询队长姓名对应的队伍资料export function leaderTabelAPI(params) {return http.get(`${resquest}/team/leader`, params)}//查询队员姓名对应的队伍资料export function mateTabelAPI(params) {return http.get(`${resquest}/team/mate`, params)}//修改队伍资料export function teamUpdateAPI(params) {return http.post(`${resquest}/team/team/update`, params)}

//导入 或者 import api from @/api/api 使用 api.racerNameTabelAPI().then()import {racerNameTabelAPI,racerQueryTabelAPI,racerUpdateAPI,leaderTabelAPI,mateTabelAPI,teamUpdateAPI} from @/api/api//这是调用的方法teamTrueHandle() {let objTemp = {status: this.SelectValue}let obj = Object.assign(this.teamTeap, objTemp)teamUpdateAPI(obj).then(res => {if (res.data.resultCode == 0) {this.teamTableData = res.data.datathis.$message.success(成功)} else {this.$message.error(异常)}})}

根目录下 vue.config.js 没有可以手动建

//proxy是处理跨域的module.exports = {devServer: {host: 0.0.0.0, // 允许外部ip访问port: 8080, // 端口https: false, // 启用httpsproxy: {/api: {target: http://xxx.xxx.xxx.xxx:8090, changeOrigin: true,secure: false,pathRewrite: {^/api: /api}}}}}

配置axios有还有很多方法 还可以直接挂在到prototype

//main.jsimport axios from axiosVue.prototype.$http = axios //使用就 this.$http.get(url,{params:参数})

这样就配置好了。不明白也可以从头再看几遍。实战项目亲测