码迷,mamicode.com
首页 > 移动开发 > 详细

vue中配置axios.js文件,发送请求

时间:2020-09-23 23:44:25      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:return   headers   promise   参数设置   imp   url   split   font   页面   

为了统一管理请求,每个项目都会去配置axios;而不是在vue中直接使用,那样不好维护等等

下面是我配置的最基础的axios文件

第一步:首先新建一个axios文件,我是放在router文件下的

import axios from "axios";
import { Toast } from "mint-ui"; // 我用的mint的框架来弹出我的错误返回 大家可以用别的提示(移动端的组件库)
import router from "@/router/index.js";

// 默认超时设置
axios.defaults.timeout = 5000;

// 相对路径设置
axios.defaults.baseURL = "";

//http request 拦截器
axios.interceptors.request.use(
  (config) => {
    // 获取token
    const token = localStorage.getItem("cc_token");
    // 设置参数格式
    if (!config.headers["Content-Type"]) {
      config.headers = {
        "Content-Type": "application/json",
        // application/x-www-form-urlencoded
      };
    }
    // 添加token到headers
    if (token) {
      config.headers.token = token;
    }
    // 鉴权参数设置
    if (config.method === "get") {
      //get请求下 参数在params中,其他请求在data中
      config.params = config.params || {};
      let json = JSON.parse(JSON.stringify(config.params));
      //一些参数处理
    } else {
      config.data = config.data || {};
      //一些参数处理
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  (response) => {
    //一些统一code的返回处理
    if (response.data.code === 501) {
      // 登录验证
      //做了个示例跳转项目中登录,并记录下相对路径
      router.push({
        name: "login", //从哪个页面跳转
        query: {
          retUrl: window.location.href.split("#")[1] || "",
          is_new_user_url: 1,
        },
      });
    }
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axios

 

第二步:发送请求,再项目中请求接口基本上是按照业务或者功能划分的

我在src下新建api的文件夹, 然后新建一个login.js 文件,用来放关于登录的接口的

import request from "@/router/axios";  //引入封装的axios,也就是步骤一中的axios文件


//发送get请求 export const getLoginApi
= (params) => { return request({ url: "www.baidu.com", method: "get", params: { ...params }, //或者 写成 params,也是可以的
   // params, 这是简写 }); };

//发送post请求  这个请求是404因为百度没有post这个接口
export const getLoginApi = (params) => {
  return request({
    url: "www.baidu.com",
    method: "post",  
    data:params
  });
};
 

 

第三步:在页面使用

  import { getLoginApi } from "@/api/login";   //在对应的vue页面中,引入刚刚的请求接口

  //就可以使用了
    let params = {
      cardId: 342511635445,
      code: 666666,
    };
    getLoginApi(params).then((res) => {
      console.log(res, "----------");
    });

 

vue中配置axios.js文件,发送请求

标签:return   headers   promise   参数设置   imp   url   split   font   页面   

原文地址:https://www.cnblogs.com/m1754171640/p/13705952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!