1.安装axios:
npm install --save axios vue-axios qs
2.main.js引入:
// 引入axios,并加到原型链中
import axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;
3.封装axios
(1)在 src 下面创建文件夹 request 在分别创建 api.js 统一管理我们的接口 http.js封装axios
-> api.js //接口域名 封装
request
->http.js //http请求 封装
(2)api.js:
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。 axios.defaults.baseURL可以设置axios的默认请求地址
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}
多api: 一个项目需要调用多个域名下的接口
(1)
// 导出 对应的不同接口的URL地址
// const configUrl = {
var baseURL= 'http://miaomiao.aaa.cn/api.php/shaoer/' //模块一接口地址
var oldURL = 'http://yyds.cn/index.php?s=/BBB/aaa/' //模块二接口地址
var videoUrl = 'https://desktop-yikao.oss-cn-beijing.aliyuncs.com/old_soft/child/course/music/'
// }
export default {baseURL,oldURL}
(2) 封装成方法的形式
/**
* api接口的统一封装
*/
import request from '@/request/http';
import Qs from 'qs';
// 登录
export function GetUserLogin(query) {
return request({
url: 'User/GetUserLogin',
method: 'post',
data: Qs.stringify(query)
})
}
(3)http.js:
import axios from 'axios'
import qs from 'qs'
import apiUrl from '../request/api' //引入api.js
// axios 默认配置
// axios.defaults.timeout = 5000 // 超时默认设置
// axios.defaults.baseURL = apiUrl.baseURL // 默认baseUR
// // axios.defaults.responseType = 'json' // 默认数据相应类型
// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'//application/x-www-form-urlencoded
//post的请求头为application/x-www-form-urlencoded;charset=UTF-8
// axios.defaults.withCredentials=true;// 表示跨域请求时是否需要使用凭证
var instance = axios.create({
baseURL: apiUrl.baseURL,
timeout: 1000 * 12, // 创建axios实例,设定超时时间是12s
withCredentials: true, // 允许携带cookie
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
}
});
//get baseURL
export default (url, data = {}, type = 'GET') => {
url = apiUrl.baseURL + url
type = type.toUpperCase()
/*
get 方法封装
@param url
@param data
@returns {Promise}
*/
if (type === 'GET') {
return new Promise((resolve, reject) => {
axios.get(url, { params: data })
.then(res => {
res = res.data
res.data=res.result //注意:res数据 要根据后端传来的接口数据格式 获取
// console.log(res)
if (res.status == 1) { //可能是1 或 200
resolve(res.data)
// console.log(res)
} else {
// console.log(2)
reject(res.data)
}
}, err => {
console.log(err)
reject(err)
})
})
}
/*
post 方法封装
@param url
@param data
@returns {Promise}
*/
//post oldURL
if (type === 'POST') {
var url = apiUrl.oldURL + url //根据get,post拼接不同的域名
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(data))
.then(res => {
res = res.data
res.data=res.result
if (res.code === 200) {
resolve(res.data)
} else {
reject(res.data)
}
}, err => {
// console.log(err)
reject(err)
})
})
}
}