封装接口

一封装接口

在src目录下创建ustils(工具)文件夹然后创建request.js

import axios from 'axios'

const request = axios.create({
  // 指定请求的根路径
  baseURL: 'https://www.escook.cn'
})

export default request

在src目录下创建api文件夹创建arricleAOI.js

// 文章相关的API接口 都封装到这个模块中
import request from '@/ustils/request.js'

// 向外按需导出一个API函数
export const getArticleListAPI = function (_page, _limit) {
  return request.get('/articles', {
    params: {
      _page,
      _limit
    }
  })
}

这样就可以直接调用

// 按需导入API接口
import { getArticleListAPI } from '@/api/arricleAPI.js'

 created () {
    this.inituserdata()
  },
methods: {
    async inituserdata () {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      console.log(res)
    }
  }

封装接口二

新建api文件夹创建request.js 文件

import axios from 'axios'

// 对于axios二次封装

// 1.利用axios对象的方法 create 去创建一个axios实例
// request就是axios 只不过稍微配置一下
const requests = axios.create({
  // 配置对象
  // 基础路径 发请求的时候 路径当中会出现api
  baseURL: '/api',
  // 代表请求超时的时间5s
  timeout: 5000
})
// 请求拦截器 在发请求之前 请求拦截器 可以检测到 可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  // config 配置对象 对象里面有一个属性很重要 header请求头
  return config
})
// 相应拦截器
requests.interceptors.response.use((res) => {
  // 成功的回调函数 服务器相应的数据回来以后 相应拦截器可以检测到 可以做一些事情
  return res.data
}, (error) => {
// 响应失败的回调函数
  return Promise.reject(new Error('faile'))
})
// 对外暴露
export default requests

再创建index.js

// 当前这个模块 API进行统一管理
import requests from "./request";

// 三级联动的接口
//  /api/product/getBaseCategoryList  get请求 无参数
// 发请求 axios发请求 结果返回 Promise对象
export const reqCategoryList=()=> requests({url:'/api/product/getBaseCategoryList',methods:'get'} )

解决跨域在vue.config.js文件中写下列代码

// 代理跨域
  devServer:{
    proxy:{
      '/api':{
        target:'http://gmall-h5-api.atguigu.cn',
        pathRewrite:{'^/api':''}
      }
    }
  }

nprogress进度条

npm i nprogress -S 先执行安装在request.js中添加二次封装axios中添加

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条的样式 
import 'nprogress/nprogress.css'
// start 进度条开始 done进度条结束

// 请求拦截器 在发请求之前 请求拦截器 可以检测到 可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  // config 配置对象 对象里面有一个属性很重要 header请求头
  // 进度条开始动
  nprogress.start();
  return config
})
/ 响应拦截器
requests.interceptors.response.use((res) => {
  // 成功的回调函数 服务器相应的数据回来以后 响应拦截器可以检测到 可以做一些事情
  // 进度条结束
  nprogress.done()
  return res.data
}, (error) => {
// 响应失败的回调函数
  return Promise.reject(new Error('faile'))
})

接口的封装

封装接口

一封装接口

封装接口二

nprogress进度条