当前位置 IIS7博客首页 > Vue 封装axios(四种请求)及相关介绍 最大化 缩小

    Vue 封装axios(四种请求)及相关介绍

    作者:糖果小宝~ 栏目:未分类 时间:2020-06-30 09:19:54

    Vue 封装axios(四种请求)及相关介绍

    首先axios是基于promise的http库

    promise是什么?
    1、主要用于异步计算
    2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
    3、可以在对象之间传递和操作promise,帮助我们处理队列

    一.首先安装axios

    npm install axios; // 安装axios
    

    二.引入axios

    在目录下新建一个文件夹,新建两个文件 http.js 和 api.js
    为什么要新建这两个文件, 我们在请求的时候 , 肯定要写接口地址和参数吧,所以我们用http.js 写四个请求方式 ,在api.js 里面去调用,然后把所有的接口地址写在api.js 里面 ,这样可以集中修改接口地址,方便管理。
    请求是请求
    地址是地址

    // 在http.js中引入axios
    import axios from 'axios'; // 引入axios
    import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到
    // Antdesign的全局提示插件
    import { message } from "ant-design-vue"; 
    

    配置 axios的操作 及 四种请求

    // 在http.js中引入axios
    import { message } from "ant-design-vue"; // 引入axios
    import axios from "axios";
    import router from "@/router";
    
    // 设置超时时间
    axios.defaults.timeout = 10000;
    // 设置默认post的请求头
    axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
    
    // 添加token 在登录成功后进行设置
    export function setToken(token) {
      axios.defaults.headers.common["Authorization"] = "Bearer " + token;
    }
    
    /**
     * get方法,对应get请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function get(url, params) {
      console.log(url, params);
      return new Promise((resolve, reject) => {
        axios
          .get(url, {
            params: params,
          })
          .then(res => checkLogin(res))
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
    }
    
    /**
     * post方法,对应post请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function post(url, params, contentType) {
      // console.log(contentType ? contentType: 'application/json')
      console.log(url, params);
      return new Promise((resolve, reject) => {
        axios
          .post(url, params, {
            headers: {
              "Content-Type": contentType ? contentType : "application/json",
            },
          })
          .then(res => checkLogin(res))
          .then(res => {
            if (res.data.code == 0) {
              resolve(res);
            } else {
              console.log(res);
              message.error(res.data.msg);
            }
          })
          .catch(err => {
            reject(err);
          });
      });
    }
    
    /**
     * put方法,对应put请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function put(url, params) {
      return new Promise((resolve, reject) => {
        axios
          .put(url, params)
          .then(res => checkLogin(res))
          .then(res => {
            resolve(res);
            // Loading.service(true).close();
            //  Message({message: '请求成功', type: 'success'});
          })
          .catch(err => {
            reject(err);
            // Loading.service(true).close();
            // Message({message: '加载失败', type: 'error'});
    
            message.error("加载失败");
          });
      });
    }
    
    /**
     * delete
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function deletedata(url, params) {
      return new Promise((resolve, reject) => {
        axios
          .delete(url, params)
          .then(res => checkLogin(res))
          .then(res => {
            resolve(res);
            // Loading.service(true).close();
            //  Message({message: '请求成功', type: 'success'});
          })
          .catch(err => {
            reject(err);
            // Loading.service(true).close();
            // Message({message: '加载失败', type: 'error'});
            message.error("加载失败");
          });
      });
    }
    
    function checkLogin(res) {
      // console.log(res)
      // res = JSON.parse(res)
      console.log(res.data);
      if (res.data.code === 401) {
        message.error(res.data.msg);
        router.push({
          //核心语句
          path: "/login", //跳转的路径
        });
        return false;
      } else if (res.data.code === 403) {
        message.error("权限不足");
        return false;
      } else if (res.data.code === 500) {
        message.error("服务器内部错误");
        return false;
      } else {
        return res;
      }
    }
    
    // function parseJSON(response) {
    //   return response.json();
    // }
    
    

    这个地方按理说是写一个 拦截器 (axios是有直接拦截 请求之前 响应拦截) 但是没有来急 就写了 checkLogin 直接方法判断 有时间我回来改

    注意

    这个里面的post请求 做了修改 就是请求的时候 响应头可能不一样 所以我们直接进行判断 要是没有使用默认,有的话用传进来的

    三.接口管理

    /**
     * api接口统一管理
     */
    // eslint-disable-next-line no-unused-vars
    import QS from "qs";
    //引入进来四种方式
    import {get, post, deletedata, put} from "./http";
    //这是和代理相对应的头
    var baseURL = "engine/";
    
    //举例子:
    //这是post的,需要进行序列化的
    export const login = data => post(baseURL + "login/account", QS.stringify(data), "application/x-www-form-urlencoded");
    //post直接用的
    export const projectlist = data => get(baseURL + "projects/page", data);
    //等等 反正就是这个意思  名字自己起就行  data是来的参数
    //QS.stringify(data) 序列化参数 放到url使用
    //"application/x-www-form-urlencoded" 这是传的响应头的  上面的注意 里面说了 post方法进行了处理
    

    四.页面进行请求

    //直接进行引入api.js里面的方法 传参数 接受回调
    //举例子
    import {login } from "../../../Api/api"; // 导入我们的api接口
     getPeople(
     {
    	name:"小坦克",
    	password:"3485"
     }
     ).then(res => {
         console.log(res)
     });
    //其他的跟这个一个意思
    

    五.设置代理

    在 vue.config.js 文件里面 进行设置 注意proxy里面的别写错了 和请求的对应起来

        devServer: {
            //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
            proxy: {
                '/engine': {
                    // http://192.168.0.19:8082/engine
                    target: 'http://192.168.0.19:8082/engine',//代理地址,这里设置的地址会代替axios中设置的baseURL
    
                    changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                    //ws: true, // proxy websockets
                    //pathRewrite方法重写url
                    pathRewrite: {
                        '^/engine': '/'
                        //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                        //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
                    }
                }
            }
        }
    

    为什么设置代理 就是让所有的请求都走这个代理 ,你也可以设置多个代理保证名字别写错就行,也可以不设置代理,直接写url请求也行 ,总之不是大问题
    看看这个,讲代理的意思的
    代理的那些事

    六.说一下请求头

    大体用三种:
    application/x-www-form-urlencoded
    multipart/form-data
    application/json
    http协议是建立在tcp/ip协议之上的应用层协议,主要包括三个部分,状态行,头部信息,消息主体。对应一个http请求就是:请求行,请求头,请求体