一,安装
npm install axios
二,在http.js中引入
import axios from 'axios';
三,定义http request 拦截器
添加数据请求公用信息
axios.interceptors.request.use(
config => {
// const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
//config.data = JSON.stringify(config.data);
let token = localStorage.token;
//let token = 'xxx';
let appid = 'xxx';
let appID = decodeURIComponent(appid);
config.headers.token = token;
//config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
if (config.method == 'get') {
config.params.app_id = appID
config.params.token = token
}
if (config.method == 'post') {
config.data.token = token
config.data.app_id = appID
}
return config;
},
error => {
return Promise.reject(err);
}
);
四,封装get方法
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
五,封装post方法
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
六,封装patch请求
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
七,封装put请求
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
八,实现跨域
const downloadUrl = url => {
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = url
iframe.onload = function() {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
}
九,方法的使用
在main.js里引入http.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import {get, post } from '@/utils/http'
Vue.prototype.$ajax = axios;
Vue.prototype.$post = post;
Vue.prototype.$get = get;
在需要调用的地方
this.$get(url).then((response) => {
}
})
this.$post(url, data).then((response) => {
}
})
this.$put(url, data).then((response) => {
}
})
this.$patch(url, data).then((response) => {
}
})