2020-12-03

vue最基本的网络封装(axios)

• 在项目里安装axios框架 npm install --save axios
• 在js文件里引入axios
• 使用axios({config})进行相关配置

//1.最简单的发送网络请求(基本使用)

import axios from 'axios';
//下面的url是我访问的一个服务器地址
new axios({
//这里没有写请求方式默认是get请求
    url: 'http://123.207.32.32:8000/home/multidata',
    method:'get'
}).then(res => {
    console.log(res)
})

// axios的get请求url有参数时
axios({
	//如果url后面有参数可以写在params:{}里面	
    url: 'http://123.207.32.32:8000/home/data',
    method: 'get',
     // 专门针对get请求的参数拼接
    params: {
        type: 'pop',
        page: 1
    }
}).then(res => {
    console.log(res)
})


//2.axios发送并发请求(最终拿到的数据是一个数组)
axios.all([
    axios({
        url: 'http://123.207.32.32:8000/home/multidata',
        method: 'get'
    }),
    axios({
        url: 'http://123.207.32.32:8000/home/data',
        params: {
            type: 'pop',
            page: 1
        }
    })
])
  	 // .then(res => {
    //     console.log(res)
    //     console.log(res[0]);
    //     console.log(res[1]);
    // })
    // 也可以使用axios.spread()方法把拿到的数组分开
    .then(axios.spread((res1, res2) => {
        console.log(res1)
        console.log(res2)
    }))

// 3.axios的全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([
    axios({
        url: '/home/data',
        method: 'get'
    }),
    axios({
        url: '/home/data',
        method: 'get',
        params: {
            type: 'pop',
            page: 1
        }
    })
]).then(res => {
    console.log(res)
})

axios的实列和模块化封装

创建asxios对应实列(axios.creat())

// 4.创建axios对应实列

const instance1 = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    // 然后通过实列来发送网络请求

instance1({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
})

instance1({
    url: '/home/data',
    params: {
        type: 'pop',
        page: 1
    }
}).then(res => {
    console.log(res);
})

axios模块封装

下面这一种重点掌握

export function request(config) {
    const instace = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    return instace(config)//axios可以返回一个promise实列,我们把它return出去,然后在调用它的.then()  .catch()方法就可以拿到请求的数据了
}

//其他文件调用方法
import { request } from './network/request'
request({
    url: '/home/data'
}).then(res => console.log(res)).catch(err => console.log(err))

这就是axios网络框架的基本使用以及实例化和封装.

下面有我使用回调函数的方法拿到请求的数据的测试代码:

一

//(通过回调拿请求过来的数据)
export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    instance(config.baseconfig).then(res => {
        config.sucess(res)
    }).catch(err => {
        config.failure(err)
    })
}

//在其他文件的调用方法
import { request } from './network/request'
request({
    baseconfig: {
        url: '/home/multidata'
    },
    sucess(res) {
        console.log(res);
    },
    failure(err) {
        console.log(err);
    }
})

二

import axios from 'axios'
export function request(config, sucess, failure) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    instance(config).then(res => {
        sucess(res)
    }).catch(err => {
        failure(err)
    })
}

//在其他文件的调用方法
import { request } from './network/request'
request({
        url: '/home/data'
    }, res => console.log(res), err => console.log(err))