一、安装axios ,vue-axios
使用yarn:
yarn add axios
yarn add vue-axios
使用npm
npm install axios
npm install vue-axios
二、在项目src文件夹建一个可以存放配置文件
三、 config.js文件用来存放后端请求接口地址
export default {
baseUrl: {
dev: '/api'
}
}
四、封装axios的请求方式(get请求、post请求)、axios超时请求时间和token
import axios from 'axios'
import config from '@/api/config'
const _baseUrl = config.baseUrl.dev
const apiUrl = _baseUrl
axios.defaults.timeout = 120000
axios.defaults.baseURL = 'http://192.168.105.42:8088'
axios.defaults.headers.common['X-Access-Token'] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzkxMTYzMzcsInVzZXJuYW1lIjoiYWRtaW4ifQ.YPJ7BV_Pg27NtPVk0FfoYsTXRpR35KXA64mMDibUzHI';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export function get (url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(response => {
resolve(response)
})
.catch(err => {
reject(err)
})
})
}
export function post (url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(
response => {
resolve(response.data)
},
err => {
reject(err)
}
)
})
}
五、封装的get/post请求方法
import { get, post} from '@/api/http'
export const getD = (url,m) => get(url,m)
export const postD = (url,m) => post(url,m)
六、.vue接口调用
data(){
return{
url:{
getHomePageHeadMessage:'/ipdata-boot/statistics/qdBaseinfo/getHomePageHeadMessage'
},
params:{
stardate: '2021-01-01',
endate: '2021-12-31',
apptype: 1
}
}
},
methods: {
init() {
getD(this.url.getHomePageHeadMessage,this.params)
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
},
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)