第一步:先安装axios
npm install --save axios
第2步:在main.js引入
import { apiGet, apiPost } from "./api/api";
Vue.prototype.$apiGet = apiGet;
Vue.prototype.$apiPost = apiPost;
import axios from "axios";
Vue.prototype.$axios = axios;
第三步 创建aip 文件夹
我这里为了防止不乱 我有在api文件夹 文件里面创建一个aip.js
import axios from 'axios'
axios.defaults.timeout = 30000
axios.defaults.baseURL = "" //这里可以写接口的前缀
// axios.defaults.baseURL = process.env.VUE_APP_API_URL
// if(process.env.VUE_APP_MODE==='development'){
// console.log('开发');
// }else if(process.env.VUE_APP_MODE==='test'){
// console.log('测试');
// }else{
// console.log('正式');
// }
axios.interceptors.request.use((config) => {
return config
}, (error) => {
return Promise.reject(error)
})
axios.interceptors.response.use((response) => {
if (response.status == 200) {
return response
}
}, (error) => {
return Promise.reject(error)
})
export function apiGet(url) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url
}).then(value => {
resolve(value.data)
}, reason => {
reject(reason)
})
})
}
export function apiPost(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data
}).then(value => {
resolve(value.data)
}, reason => {
reject(reason)
})
})
}
然后在api文件里创建一个http文件
import { apiGet, apiPost } from "./api"; //先引入api
// 接口是什么就写什么
export function getCode() {
return get('') // 这个不是参数的
}
export function postLogin(data) {
return post('', data) //这是带参数的
}
//post方法
function post(url, data) {
return new Promise((resolve, reject) => {
apiPost(url, data).then(value => {
if (value.code == 0) {
resolve(value)
} else {
reject(value)
}
}, reason => {
reject(reason)
})
})
}
//get方法
function get(url) {
return new Promise((resolve, reject) => {
apiGet(url).then(value => {
if (value.code == 0) {
resolve(value)
} else {
reject(value)
}
}, reason => {
reject(reason)
})
})
}
第四步就是使用了
在你页面 先引入
// http.js文件这个 export function 后面起什么名字这个 {} 就引入什么名字然后下边在调用一下就成功了
import { } from '../../api/http'