vue中使用axios

axios只是一个基于promist用于浏览器和node.js的http客户端，他有以下的特征           

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求           

支持 Promise API          

拦截请求和响应          

转换请求和响应数据           

取消请求           

自动转换JSON数据            

客户端支持防止 CSRF/XSRF

axios安装

//在项目根目录打开cmd输入

npm i axios vue-axios

// 在main.js中引入

import axios from 'axios'; //引入axios

import VueAxios from 'vue-axios'; // 引入vue-axios 

Vue.use(VueAxios,axios); //使用

vue中配置axios文件，封装axios请求

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

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

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, "----------");

    });