vue中axios封装及携带参数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一 axios网络请求封装封装

1 src/utils文件夹下新建requery.js 设置基础地址

// 网络请求 - 二次封装
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000"
export default axios

2 src/api文件夹下新建各个页面请求的js文件

需要导入requery.js文件

// 文件名-尽量和模块页面文件名统一(方便查找)
import request from '@/utils/request'

// 首页 - 推荐歌单
// 文件名-尽量和模块页面文件名统一(方便查找)
import request from '@/utils/request'

// 首页 - 推荐歌单
export const recommendMusic = params => request({
    url: '/personalized',
    params
    // 将来外面可能传入params的值 {limit: 20}
})

// 首页 - 推荐最新音乐
export const newMusic = params => request({
    url: "/personalized/newsong",
    params
})

3 src/api/index.js - 统一导出接口供外部使用

// api文件夹下 各个请求模块js, 都统一来到index.js再向外导出
import {recommendMusic, newMusic} from './Home'
import {hotSearch, searchResultList} from './Search'
import {getSongById, getLyricById} from './Play'

export const recommendMusicAPI = recommendMusic // 请求推荐歌单的方法导出
export const newMusicAPI = newMusic // 首页 - 最新音乐

export const hotSearchAPI = hotSearch // 搜索 - 热搜关键词
export const searchResultListAPI = searchResultList // 搜索 = 搜索结果

export const getSongByIdAPI = getSongById // 歌曲 - 播放地址
export const getLyricByIdAPI = getLyricById // 歌曲 - 歌词数据

4 具体逻辑页面按需引入api/index.js 请求

使用asyn+await 等待axios返回结果

import { recommendMusicAPI, newMusicAPI } from "@/api";
export default {
  data() {
    return {
    };
  },
  async created() {
    const res = await recommendMusicAPI({
      limit: 6,
    });
    console.log(res);
    this.reList = res.data.result;

    const res2 = await newMusicAPI({
      limit: 20
    })
    console.log(res2);
    this.songList = res2.data.result
  },
  }

二 携带参数方法

1 携带token值 （请求带有权限的接口时）

export const getUserInfo = () => {
  return request({
    method: 'GET',
    url: '/app/v1_0/user',
    headers: {
      Authorization: `Bearer ${store.state.user.token}`
        // ${store.state.user.token}` 为携带的token 
    }

  })
}

1.1 在请求拦截器中携带token值

import axios from 'axios'
import store from '@/store'

const request = axios.create({
    baseURL: 'http://ttapi.research.itcast.cn/' // 基础路径

    // baseURL: 'http://toutiao-app.itheima.net/'

  })
  // 请求拦截器
  // Add a request interceptor
request.interceptors.request.use(function(config) {
  // 请求发起会经过这里
  // config：本次请求的请求配置对象
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }

  // 注意：这里务必要返回 config 配置对象，否则请求就停在这里出不去了
  return config

}, function(error) {
  // 如果请求出错了（还没有发出去）会进入这里
  return Promise.reject(error)
})

// 响应拦截器

export default request

2 api 要求携带不同格式的参数

1 body => 使用deta{}

export const addUserChannel = channel => {
  return request({
    method: 'PATCH',
    url: '/app/v1_0/user/channels',
    data: {
      channels: [channel]
    }
  })
}

2 Query =>使用params{}

 export const getSearchSuggestions = (q) => {
   request({
     method: 'GET',
     url: '/app/v1_0/suggestion', ///app/v1_0/suggestion
     params: {
       q
     }
   })
 }

3 在请求url中携带参数

export const deleteUserChannel = channelId => {
  return request({
    method: 'DELETE',
    url: `/app/v1_0/user/channels/${channelId}`
  })
}

4 路由配置参数中传参

 {
    path: '/article/:articleId',
    name: 'article-contain',
    props: true,
    component: () =>
      import ('@/views/article-contain')
  },

// :to="'/article/'+article.art_id" -->
<van-cell
:badge="99999"
   :to="{
      // 根据路由名称进行跳转
     name:'article-contain',
     // 传递路由动态参数
     params:{
      articleId: article.art_id
     }}"
  class="article-item" />

三 请求头接口类型

1 要求 Content-Type 是 application/json

如果接口要求 Content-Type 是 application/json
        // 则传递普通 JavaScript 对象
        // updateUserPhoto({
        //   photo: blob
        // })

2 要求 Content-Type 是 multipart/form-data

 // 如果接口要求 Content-Type 是 multipart/form-data
        // 则你必须传递 FormData 对象
        const formData = new FormData()
        formData.append('photo', blob)

        const { data } = await updateUserPhoto(formData)