Vue-axios

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  //
            }
        }
    }
})