项目中先安装axios
npm install axios
然后在对应的main.js中导入
import axios from 'axios'
准备:
可以在devServer中配置解决跨域问题,配到服务器时,需要配置对应的nginx
,不然会出现404问题
//vue.config.js
module.exports = {
devServer: {
open: true,
host: '0.0.0.0',
port: 5500,
// env: require('./dev.env'),
https: false,
hotOnly: true,
proxy: {
'/api': {
// target: '你需要代理的域名或者ip',
target: 'http://www.baidu.com',
// 跨域
changeOrigin: true,
// secure: false,
// ws: true,
pathRewrite: {
'^/api': ''// 请求数据路径别名
},
},
},
}
}
一、常用的api
axios.get(url,params)
getList(params){
return axios.get('/back/list',params)
}
// 另一种书写方式
getList(params){
return axios.get(`/back/list?params=${params}`)
}
axios.put(url,params)
putList(params){
return axios.put('/back/put',params)
}
axios.post(url,params)
postList(params){
return axios.post('/back/post',params)
}
axios.delete
// 假设delete 接口为 /back/delete?id=xxx
removeList(params){
return axios.delete(`/back/delete?id=${params}`)
}
二、拦截器
先创建实例
var instance = axios.create()
添加token
或者在url
中添加params
axios
默认传递formData
格式的数据
instance.interceptors.request.use(config=>{
console.log({ config }) //可以打印看下config是啥
config.params = {
accessToken : 'xxx'
}
})