第一步
在static/js/创建http.js文件
import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true //请求携带cookie
axios.defaults.crossDomain = true //请求携带额外数据(不包含cookie)
axios.defaults.baseURL = api //请求的api
//http request 拦截器
axios.interceptors.request.use(
config => {
if (config.method === 'post' && config.url.indexOf('uploadApi') === -1) { //uploadApi是上传api,不对post做处理
config.data = qs.stringify({
...config.data
})
} else if (config.method === 'get') {
config.params = {
...config.params
}
}
return config
},
error => {
return Promise.reject(error)
}
)
//http response 拦截器
axios.interceptors.response.use(
response => {
return response
},
error => {
return Promise.reject(error)
}
)
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, { params }).then(response => {
if (response.data.success) {
resolve(response.data.payload)
} else {
reject(response.data.error)
}
}).catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.get(apiUrl, data).then(response => {
if (response.data.success) {
resolve(response.data.payload)
} else {
reject(response.data.error)
}
}).catch(err => {
reject(err)
})
})
}
第二步
在main.js中引入
import axios from "axios"
import { post, get } from "../static/js/http"
Vue.prototype.$post = post
Vue.prototype.$get = get
第三步
在组件中使用
this.$post('接口地址', {
//请求参数写在这里
}).then(res => {
//请求成功处理
}).catch(err => {
//请求失败处理
}
//其他请求方式同理.....