axios使用问题

项目中先安装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'
	}
})