以登录流程为例说明接口的封装。

1.登录调用后台的登录api

登录界面的代码

2.请求api的封装

import { vuetest } from '@/api/index'  --- 引用src/api/idex.js文件中的export的vuetest 请求。src/api/idex.js中有请求方式、请求参数等设置

vuetest().then(res => {  ----- res请求服务端接口返回的数据

src/api/idex.js文件代码

// api封装示例

// 导入配置好的axios文件
import Axios from "@/axios"

// 封装axios请求函数，并用export导出
export function getItemList(datas) {
return Axios({
url: "/api/getItemList",
method: "post",
headers: {
'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form
},
data: datas
})
}
export function getItem(datas) {
return Axios({
url: "/api/getItem",
method: "post",
headers: {
'Content-Type': 'application/json' //设置请求头请求格式为json
},
data: datas
})
}

export function getItemInfo(datas) {
return Axios({
url: "/api/getItemInfo"+datas,
method: "get",
})
}

export function vuetest(datas) {
return Axios({
url: "/vue/test",
method: "post",
headers: {
'Content-Type': 'application/json' //设置请求头请求格式为json
},
data: datas
})
}

说明：

调用最后一个函数，专注于请求参数的处理。

return Axios({ ----- 是ajax请求的处理，Axios是import Axios from "@/axios"中导出的对象

3.ajax请求的进一步封装，主要是对所有ajax请求的一些共同的参数的设定，如超时时间、根路径

src/axios中的index文件（这个index.js文件的名字应该是不能改变的，所有导入的路径没有确定到文件而是目录）

//引入 axios库
import axios from 'axios'
//引入 node中自带的qs模块（数据格式转换）
import qs from 'qs'

/* 2.全局默认配置 */
let baseURL
// 判断开发环境（一般用于本地代理）
// if (process.env.NODE_ENV === 'development') { // 开发环境
// baseURL = 'http://localhost:8082/VoucherWebService' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
// } else { // 编译环境
// if (process.env.type === 'test') { // 测试环境
// baseURL = 'http://sw.apitest.com'
// } else { // 正式环境
// baseURL = 'http://sw.api.com'
// }
// }

// 配置axios的属性
axios.defaults.timeout = 6000; // 请求超时时间1分钟
//axios.defaults.baseURL = baseURL; // 你的接口地址
axios.defaults.responseType = "json";
axios.defaults.withCredentials = false; //是否允许带cookie这些

/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
*喜好，我比较喜欢用这种方法，如下：
*/
const Axios = axios.create({
baseURL:baseURL , // 后台服务地址
timeout: 60000, // 请求超时时间1分钟
responseType: "json",
withCredentials: false // 是否允许带cookie这些
});

/* 3.设置拦截器 */
/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
时定义的变量*/
Axios.interceptors.request.use((config) => {
// 发送请求前进行拦截
// 可在此处配置请求头信息
// config.headers["appkey"] ="…";
// config.headers["token"] ="…";
console.log("======interceptors=====");
console.log(config);
if (config.method == "post") {
/*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
换，会使得参数丢失，造成请求失败。*/
config.data = qs.stringify(config.data)
}
return config;
},(error) =>{
//console.log("错误的传参", 'fail');
return Promise.reject(error)
})

// Axios.interceptors.response.use((res) =>{
// // 请求响应后拦截
// if(res.status == 200){ // 对响应数据做些事
// //alert("提交成功")
// return Promise.resolve(res)
// }
// return res;
// }, (error) => {
// //alert("网络异常!") 404等问题可以在这里处理
// return Promise.reject(error)
// })
export default Axios

---

如果浏览器报这个错：: No 'Access-Control-Allow-Origin' header

这是个跨域问题：client/server同一个ip不同端口或者相同的端口不同的ip或者ip、端口都不同（个人理解）

vue-cli2解决方法（3.x网上也有），在

config/index.js文件中的proxyTable添加如下配置：

proxyTable: {
'/': {
target: 'http://localhost:8082/myproject', //你要访问的服务器域名
changeOrigin: true, //允许跨域
pathRewrite: {
'^/': ''
}
}

},

axios中的baseURL 不能配置否则就不用这个代理的配置了。