vue+axios+promise實現網絡層封裝（二次封裝）

vue+axios+promise實現網絡層封裝（二次封裝）

封裝是一種網絡模塊化的機制，它使得分佈各處的網絡可以從收到的數據包讀到控制信息，根據協議做出合適的反應.用來處理響應攔截和請求攔截 也可以做我們的數據預加載，實現數據權限的校驗

一： 封裝思想方法

1. 首先安裝axios

2. 設置基礎的路徑(baseURL)

3. 設置超時時間

4. 請求參數(默認參數可以爲設備的寬高)

5. 請求方式(GET,POST)

6. 請求成功或者失敗後的處理

7. 請求前 請求後的處理

   二：網絡模塊需要提供的功能

8. GET POST請求 上傳 下載

9. 統一URL管理

10. 數據解析

11. 監控網絡狀態

12. 網絡數據緩存

13. 提示

14. 測試

思路：

3.1 安裝

`npm install axios -S

3.2 創建一個http的文件夾，裏面放入api.js和 request.js

在main.js裏面引入，

3.3 設置請求攜帶的參數方法等 request.js

/* eslint-disable no-undef */
//首先引入
import Axios from 'axios'

// 創建axios實例 設置基礎的路徑和超時時間
const service = Axios.create({
  baseURL: 'https://test.365msmk.com',
  timeout: 3000
})

// 請求攔截器
service.interceptors.request.use(config => {
  // 在發送請求之前做些什麼
  //  console.log(JSON.parse(localStorage.token))
  if (localStorage.token) { //判斷是否存在token，如果存在的話，則每個http的header都加上token
  //設置頭信息
    config.headers['authorization'] = 'Bearer' + JSON.parse(localStorage.token)

  }

  return config
}, _error => {
  // eslint-disable-next-line prefer-promise-reject-errors
  return Promise.reject('請求出錯')
})

// 響應攔截器
service.interceptors.response.use(res => {
//如果狀態碼是200的話就說明請求成功，那麼我們就返回請求成功後的數據
  if (res.status === 200) {
    return res.data
  }
}, error => {
  // eslint-disable-next-line prefer-promise-reject-errors
  //如果是錯誤的話 我們就提示請求出錯
  return Promise.reject('出錯啦', error)
})

export default service

3.6 api.js

//首先引入我們需要的請求操作
import request from './request'
//這個方法是用來獲取我們傳遞過來的參數並且進行拼接的

function params(value) {
  var a = '?';
  //首先我們拿到傳遞過來的值並且循環 
  //在這裏注意：forin 循環的是數組forof循環的是value
  for (let b in value) {
    console.log(b, value[b]);
      //循環出來的key 如果要用&符號連接的話  那麼會出現一個問題就是最後面也會有着這個符號 ，我們就要想辦法給他截取掉
    a += b + '=' + value[b] + '&'
 
  }
  //這一步的操作就是截取的 最終返回截取成功的
  a = a.substr(0, a.length - 1)
  console.log(a)
  return a
}

// 登錄
export function login() {
  return request({
    url: '/api/app/login',
    method: 'post',
    data: {
      mobile: "19937723787",
      password: "123456",
      type: 1
    }
  })
}
export function toClassDetails(params) {
  return request({

    url: `/api/app/courseInfo/basis_id=${params}?`,
    method: 'get'
  })
}
//返回講師介紹
export function vipDetail(params) {
  return request({

    url: `api/app/teacher/info/${params}`,
    method: 'get'
  })
}
// 講師信息
export function getData(params) {
  return request({
    url: `/api/app/teacher/${params}?`,
    method: 'get'

  })
}
// 學員評價
export function comment(data) {
  return request({
    url: '/api/app/teacher/comment',
    method: 'post',
    data
  })
}
// 主講課程
export function mainCourse(data) {
  return request({
    url: '/api/app/teacher/mainCourse',
    method: 'post',
    data
  })
}
//首頁數據
export function homeData(data){
  return request({
    url:'/api/app/recommend/appIndex',
    method:'get',
    data
  })
}
export function courseInfo(params){
  return request({
    url:`http://localhost:8080/api/courseInfo/basis_id=${params}?`,

    method:'get'
  })
  
}
// 關注和取消關注
export function collect(params){
  return request({
    url:`api/app/teacher/collect/${params}`,
    method:'get'
  })
}

3.7 使用：

import {toClassDetails,Sumcode,  login,} from "../http/api";

//直接使用
 getData(this.$route.query.teacher_id).then(res => {
      console.log("老師介紹", res.data.teacher);
      this.list = res.data.teacher;
      // 這個是我拿到當前講師詳情的狀態 賦值給checked
      this.checked = res.data.flag;
      window.console.log(this.checked, "4567+90")
    });