axios
安装
$ npm install axios -S
创建requessts或http目录
创建一个js文件，导入axios
import axios from 'axios'
创建一个axios instance
const ajax = axios.create({
baseURL:".." //根目录
})
导出取得的数据
export const getTodos = () => {
return ajax.get('..')//请求数据的地址
}
main.js 文件
import * as $http from './requests' //把request里的方法全部引入
Vue.prototype.$http = $http //放到Vue的原型上，这样就可以在任何一个Vue的实例里使用this.$http.requests中的方法名()发送请求
拦截器
//拦截请求 请求数据完成前 可在此次做一些加载效果
ajax.interceptors.request.use((config) => {
config //所有请求的配置 可以在上面修改，增加数据
return config //拦截修改后要返回 必须return 不然请求不会执行
})
//拦截响应 请求数据完成时 可根据状态码 做出不同的效果
ajax.interceptors.response.use((resp) => {
return resp.data //返回请求索要的数据
})
开发时的请求数据地址跟上线地址有可能不相同时
//判断当前是什么环境
const isDev = process.env.NODE_ENV === 'development'
const ajax = axios.create({
baseURL:isDev ?'开发环境的地址':"上线后的地址"
})
还可以利用代理
配置代理(解决跨域问题)
根目录建vue.config.js文件
module.exports = ({
//开发时的配置
devServer: {
proxy: {
'/ajax' :{
target: "",//凡是以ajax开始的请求都代理到这个地址
ws: true,
changeOrigin: true //
}
}
}
})
