vue中封装api数据层访问层

api封装的是通过封装get/post/jsonp等请求，使得页面无需直接访问后代而是调用相关方法直接获取相关的后代数据，避免过多的数据处理逻辑，将重点放在数据渲染上。

1，准备阶段

a，首先创建api访问层（文件夹），新建两个文件分别叫axios和api的JavaScript文件。再api文件夹再新建一个文件夹base，用于存放请求路径，新建dev，pro，test，base_url四个js文件。

b，测试接口（github提供的测试接口）

请求地址	https://api.github.com/search/repositories	请求方式：get
参数	q：关键字	sort：排行规则
实参	v（我们通过关键字v来查看）	star（关键字为v的相关点赞数进行排行）

2，axios封装

axios地址：http://www.axios-js.com/zh-cn/docs/vue-axios.html

这里是vue-axios的，是axios针对vue封装的接口请求，在这里我们直接封装原生的axios。

 

下载axios：

npm install axios --save

        在axios文件：该文件用于封装请求方法，在此主要封装get和post方法。通过创建axios实例instance 。

import axios from 'axios'
import {BAES_URL} from './base/base_url'
//新建axios实例
const instance = axios.create({
    baseURL: BAES_URL,
    timeout: 5000,
  });
  //添加请求拦截器
  axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
      // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  
  //封装get
  let get=async (url,params)=>{
      let {data}=await instance.get(url,{params})
      return data
  }
  //封装post
  let post=async (url,params)=>{
      let {data}=await instance.post(url,params)
      return data
  }
  //导出get和post
  export {
      get,
      post
  }

base_url文件用于封装请求路径，在里面有三个不同的路径，方便不同的开发时期切换请求路径。

import { dev } from './dev'
import { pro } from './pro'
import { test } from './test'
let urls={
        dev,
        pro,
        test
    }
//通过切换中括号来实现请求路径的切换
export let BAES_URL=urls['dev'].url

一般情况下，我们都是把路径都写在不同的文件中，再引入进来，dev文件用于存放开发阶段时的请求路径，pro文件用于存放生产阶段的请求路径，test用于存放测试阶段的请求路径。

dev文件

export let dev={
    name:'开发环境',
    url:'https://api.github.com'
}

pro文件：

export let pro={
    name:'生产环境',
    url:'https://api.github.com'
}

test文件：

export let  test={
    name:'测试环境',
    url:'https://api.github.com'
}

3，封装api

api就是与后代进行交互的地方，定义了许多的请求方法向后台发请求。

import {get,post} from './axios'
//通过关键字获取star相关排行信息
export let starList=(params)=>{
    return  get('/search/repositories',params)
  }
export let starLists=(params)=>{
    return  post('/search/repositories',params)
  }

4，测试

这里直接通过调用starList方法获取相关后代内容，参数我们为v和star，在app.vue中

<template>
  <div id="app">
    aaa
   <input type="button" value="dianwo" @click="okok">
  </div>
</template>
<script>
import { starList } from './api/api'
export default {
   data() {
    return {
      params:{
        q:'v',
        sort:"stars"
      }
    }
  },
   methods:{
    async okok(){
      let data=await starList(this.params)
      console.log(data)
    }
  }
}
</script>
<style>
</style>

注意因为请求数据过大，如果报错，修改axios文件的timeout时间。

demo下载地址（设置不需要下载币了）：https://download.csdn.net/download/qq_31539817/19650962