谈谈在vue项目中api的封装（理解）

谈谈在vue项目中api的封装（理解）

 api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包（指令：npm i axios --save）。

api的封装主要的目的就是：在帮助我们简化代码和后期的更新维护。

axios封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，类似于JQ中的ajax，用于HTTP请求，可运行在浏览器端和node.js中。他有很多优秀的特性，例如支持promise API、拦截请求和响应、取消请求、转换json、客户端防御XSRF等

具体步骤：

1、首先在src文件夹下创建一个api文件夹

2、在api文件夹中创建三个js文件（core.js）核心文件、（config.js）配置文件、（index.js）入口文件

3、配置核心文件（core.js）

// 核心文件
import axios from "axios"; //引入axios模块
import API from "./config.js"; //解构赋值获取到METHODS的值(请求类型)

// 创建axios实例返回一个promise对象（） 完成配置项
const instance = axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'xxxxx',//公共路径
  timeout: 5000, //超时时间
  // headers: {'X-Custom-Header': 'foobar'} //设置请求头
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么(请求还没有发出)
  // 弹起lodding控件
  // 拦截请求 config配置 动态添加或删除配置
  return config;
}, function (error) {
  // 对请求错误做些什么
  // 提示用户请求发送失败的原因
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么（服务器已响应请求并返回）
  // 对自身服务器响应的状态码进行处理
    //隐藏loadding控件
  return response;
}, function (error) {
  // 对响应错误做点什么
  // 网络问题、服务器的问题
  return Promise.reject(error);
});




//封装 判断请求方式 （POST、GET）
// export 抛出request 函数

// type:请求方式（POST、GET）
// url参数：请求地址
// params参数:请求的参数
export function request(type, url, params) {
  switch (type) {
    //当请求方式为post请求时，调用封装的post函数
    case API.METHODS.POST:
      return post(url, params);
      //当请求方式为get请求时，调用封装的get函数
    case API.METHODS.GET:
      return get(url, params);
  }
}


//封装的get请求方式
// url参数：请求地址
// params参数:请求的参数
function get(url, params) {
  return instance.get(url, params)
}

//封装的post请求方式
// url参数：请求地址
// params参数:请求的参数
function post(url, params) {
  return instance.post(url, params)
}

4、配置config.js(配置文件)

const API = {
    METHODS:{
        POST:"post", //请求方式：post请求
        GET:"get"//请求方式：get请求
    },
    PATH:{
        LOGIN:"/user/xxxxxx",//登录接口
    }
}

export default API;//将这个文件作为对象抛出去

5、配置index.js(入口文件)

// 入口文件
import {request} from "./core.js"; //获取request函数
import API from "./content.js";//引入API模块
const APIShow = {
    // 登录请求封装(方法)
    //login(username,password) {
        //第一个参数: 请求方式
        //第二个参数：请求的API（网址）
        //第三个参数：请求是携带的参数
        //return request(API.METHODS.GET, API.PATH.LOGIN, {params:{
           // mobile:String(username),
           // pwd:Number(password)
        //}})
    //},
}

export default APIShow;//将这个文件作为对象抛出去

6、在main.js文件中引入（全局引入）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
import "./config/rem.js";
Vue.config.productionTip = false
import "vant/lib/index.css";//引入vant样式

import APIShow from "./API/index.js";//引入封装API的index.js文件
Vue.prototype.$APIShow = APIShow;//全局注册

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

7、在组件中使用

<template>
  <div>
    <Container>
      <van-form>
        <van-field
          v-model="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit" @click="onSearch">
            提交
          </van-button>
        </div>
      </van-form>
    </Container>
  </div>
</template>

<script>
import Vue from "vue";
import { Form ,Field ,Button } from "vant";

Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
export default {
  components: {
    //注册组件
    Container,
  },
  data() {
      return {
          username:"",//手机号
          password:"",//密码
      }
  },
  methods: {
      onSearch(){//点击登录
        this.$APIShow.login(this.username,this.password).then(res=>{
           console.log(res);
        }).catch(err=>{
            console.log(err);
        })
      }
  },
};
</script>
<style lang="scss" scoped>
</style>