day22

一、请求封装

1.封装公用方法

/src/assets/js/http.js

import axios from 'axios'
axios.defaults.baseURL = '/api'
/**
 * 公用的get请求方法
 * @param url  请求地址
 * @param params 请求参数
 */
export function get(url,params = {}){
    return new Promise((reslove,reject)=>{
        axios({
            url,
            params,
        }).then(res=>{
            reslove(res)
        }).catch(err=>{
            reject(err)
        })
    })
}
/**
 * 公用的post请求方法
 * @param url 请求地址
 * @param data 请求数据
 */
export function post(url,data = {}){
    return new Promise((reslove,reject)=>{
        axios({
            method:'post',
            url,
            data,
        }).then(res=>{
            reslove(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

2.封装业务逻辑方法

/src/assets/js/request.js

/**
 * 具体的网络请求方法
 */
import { get } from './http'
/**
 * 获取轮播图
 */
export function getBanner(){
    return new Promise((reslove,reject)=>{
        get('/banner').then(res=>{
            reslove(res)
        }).catch(err=>{
            reject(err)
        })
    })
}
​
/**
 * 获取推荐歌单
 */
export function getPersonalized(){
    return new Promise((reslove,reject)=>{
        get('/personalized',{limit:6}).then(res=>{
            reslove(res)
        }).catch(err=>{
            reject(err)
        })
    })
}
/**
 * 获取最新音乐
 */
export function getNewSong(){
    return new Promise((reslove,reject)=>{
        get('/personalized/newsong',{limit:6}).then(res=>{
            reslove(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

3.axios批量请求

axios.all([函数名1(),函数名N()])

使用方法1：

axios.all([函数名1(),函数名N()]).then(参数=>{
    //此时这个参数就是一个数组，数组的成员是函数的返回结果
})

使用方法2：

axios.all([函数名1(),函数名N()]).then(
    axios.spread((返回结果1,返回结果N)=>{
        ...
    })
)