数据请求加异步

首先创建一个 http 文件（看自己习惯）
然后创建 request.js 文件


import Axios from "axios";
//引入axios
import store from "../store";
//引入 vuex
import router from "../router";
//引入路由

var baseURL = `https://www.liulongbin.top:8888/api/private/v1/`;
//基本域名

const instance = Axios.create({
    
    
    baseURL,
    timeout: 5000, //超时时间
});
//创建实例

// 添加请求拦截器

// 在发送请求之前进行拦截
instance.interceptors.request.use(
    //
    function(config) {
    
    
        // 在发送请求之前做些什么  如果  本地存储·里面 有 token 数据
        // 上面  引入了 store  所以 这里  不需要 使用 $ 符号
        if (store.state.token) {
    
    
            config.headers.Authorization = store.state.token;
            //在配置的头信息里添加授权字段=vuex里的token
        }
        //如果vuex中有token，证明已经登陆了，在发送请求的时候携带token
        // 在请求的头信息里 的Authorization字段携带token
        return config;
    },
    function(error) {
    
    
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    function(response) {
    
    
        // 对响应数据做点什么
        // console.log(response);
        if (response.data.msg === "无效token") {
    
    
            router.push({
    
    
                path: "/login",
            });
        }

        return response;
        //如果后台返回的数据告诉我们 token是无效的 就跳转到登陆页面
    },
    function(error) {
    
    
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

// 封装http方法，如果请求成功就把请求到的数据return 如果响应失败就执行失败的catch函数
// data是post的传参  params是get的传参

export default function http(url, method, data = {
    
    }, params = {
    
    }) {
    
    
    return instance({
    
    
            url,    //简写 地址
            data,   //  参数
            method,  // 方法  get/post
            params,
        })
        .then((res) => {
    
    
            console.log(res);
            if (res.status >= 200 && res.status < 300) {
    
    
                return res;
            } else {
    
    
                return Promise.reject(res.data.meta.msg);
                //失败的回调
            }
        })
        .catch((err) => {
    
    
            return Promise.reject(err);
            //走失败的回调
        });
}

// axios拦截器 就是对请求和响应进行拦截，拦截之后做一些事情，做完之后才继续放行

还有一个参数 的处理  qs 
cnpm i qs --save

在main.js中引入

import http from "./http/request.js";
Vue.prototype.$http = http;
//全局引入http方法

页面中

submit() {
    
    
  this.$http("/login", "post", {
    
    
    username: this.obj.username,
    password: this.obj.password,
  }).then((res) => {
    
    
    console.log(res);
    // 如果 状态码  对的话 就 调用 vuex 里 的方法
    if (res.data.meta.status == 200) {
    
    
      this.$store.commit("settoken", {
    
    
        // 把 token 存到  vuex  里面 去
        token: res.data.data.token,
        // 用户名 也存到 vuex 里面
        user: this.obj.username,
      });
      //存入 成功之后 就 可以 跳转到  /user  的页面 去 了
      this.$router.push({
    
     path: "/users" });
    }
  });
},

数据请求 加 异步

おすすめ