axios配置步骤:

  • 安装axios:npm instal axios -S (官网:https://www.axios-http.cn/)
  • 在src下新建目录utils,在utils下新建request.js文件
  • 导入axios:import axios from "axios";
  • 1)创建一个实例  2)request拦截器  3)response拦截器  4)把实例暴露出去
//request.js
import axios from "axios";

const request = axios.create({
    baseURL: 'http://localhost:9090',
    timeout: 5000
})

// request拦截器
// 可以自请求发送前对请求做一些处理
//比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8'

    // config.headers['token'] = user.token   //设置请求头
    return config
}, error => {
    return Promise.reject(error)
})

// response拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response=>{
    let res = response.data
    if (response.config.responseType === 'blod'){   //如果是返回的文件
        return res
    }
    if(typeof res === 'string'){    //兼容服务端返回的字符串数据
        res = res ? JSON.parse(res) : res
    }
    return res
},error =>{
    console.log('err'+ error)
    return Promise.reject(error)
})

export default request

使用:

//main.js
import request from "@/utils/request";
Vue.prototype.request = request
// Home.vue
<script>
import request from '../utils/request';
export default {
    name: 'Home',
    data() {
        return {}
    },
    created() {
        this.load()    //请求分页查询数据
    },
    methods: {
        load() {   //请求分页查询数据
            request.get("/user").then(res => {
                console.log(res)
            })
        },
    }
}
</script>

报错: 

 经查找,发现是main.js中多写了个括号

Vue.prototype.request = request()   //错误
Vue.prototype.request = request     //正确

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐