十一、axios

axios

一、发送请求的方式

二、安装及使用

npm install axios --save

//使用
//http://123.207.32.32:8000/home/multidata  get测试地址
//http://123.207.32.32:8000/home/data?type=pop&page=1
//http://123.207.32.32:8000/home/data?type=sell&page=1
import axios from 'axios'

asios({
    url: 'http://123.207.32.32:8000/home/multidata',//测试数据地址
    method: 'get',//请求方式
    params: {
        type: 'pop',
        page: 1
    },
    
}).then(res => {
    console.log(res)
})

三、并发请求

axios.all([
    axios(),axios()
]).then(results => {
    //可以拿到多个axios的合并结果
})

//也可以对结果进行分割
axios.all([
    axios(),axios()
]).then(axios.spread((res1, res2) => {
    console.log(res1),
    console.log(res2)
}))

四、全局配置

axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-from-urlencoded';

五、axios实例

const instance1 = axios.create({
    baseURL: '',
    timeout: 5000
})

instance1({
    url: '',
    params: {
        
    }
}).then((res) => {
    console.log(res)
})

六、封装

• 第一种写法

import axios from 'axios'

export function request(config){
    retrun new Promise((resolve, reject) => {
        const instance = axios.creat({
            baseRUL: '',
            timeout: 5000
        })
    })
    //发送网络请求
    instance(config).then(res => {
        resolve(res)
    }).catch(err => {
        reject(err)
    })
}


//调用
request({
    url: '',   
}).then(res => {
    
}).catch(err => {
    
})

• 第二种写法

import axios from 'axios'

export function request(config){
    const instance = axios.creat({
        baseURL: '',
        timeout: 5000
    })
    return instance(config)
}

七、拦截器

import axios from 'axios'

export function request(config){
    const instance = axios.creat({
        baseURL: '',
        timeout: 5000
    })
    //请求拦截器
    instance.interceptors.request.use(config => {
        //处理代码
        //1.config信息不符合服务器要求
        //2.每次网络请求是，可以再页面上显示一个请求图标
        //3.某些网络请求需要携带一些特殊信息如（token），用户未登录则跳转至登陆页面
        return config
    },err => {
        //发送失败来这里
        
    })
    
    
    //响应拦截器
    instance.interceptors.response.use(res => {
        return res.data
    	},err => {
        
    })
    
    return instance(config)
}