axios在vue的封装和使用

一、本人将此段代码写到request.js 文件中，封装axios，命名为request，在baseURL写上访问的接口

按需使用，第一条暂时够用了

import axios from 'axios';

export function request(config) {
    // （1）创建axios的实例
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx:xxxx/xxx',
        timeout: 5000
    })

    // （2）axios的拦截器——请求拦截
    instance.interceptors.request.use(config => {
        // console.log(config);  //成功拦截URL的配置
        return config;  //返回出去，否则就被拦截了
    }, err => {
        // console.log(err);
    })

    //响应拦截
    instance.interceptors.response.use(res => {
        // console.log(res);  //响应结果
        // return res;   //要return出去，否则就被拦截了
        return res.data;   //可以只返回数据
    }, err => {
        console.log(err);
    })

    // （3）发送真正的网络请求
    // 由于instance返回的就是Promise，所以不用再写
    return instance(config)
}

 

二、引用封装好的axios，即request。传入具体路径，例如该文件名为getData.js

import { request } from "./request";

export function getData() {  // getData()为自定义方法名
    return request({
        url: '/xxxx'
    })
}

 

 三、获取结果

import { getData } from "xxx/getData.js";


created:{
     getData().then((res) => {
        // 1.获取数据
        const data = res.result;
}