8.网络模块封装

网络模块选择

选择一: 传统的Ajax

传统的Ajax是基于XMLHttpRequest(XHR)。配置和调用方式等非常混乱。所以真实开发中很少直接使用, 而是使用jQuery-Ajax。

选择二: 使用jQuery-Ajax

jQuery的代码1w+行.Vue的代码才1w+行。完全没有必要为了用网络请求就引用这个重量级的框架。

选择三: Vue-resource

vue-reource不再支持新的版本时, 也不会再继续更新和维护。对以后的项目开发和维护都存在很大的隐患。

选择四: Vue作者推荐的axios

JSON

使用JSONP最主要的原因往往是为了解决跨域访问的问题。
JSONP的核心在于通过<script>标签的src来帮助我们请求数据.
原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的.
这个时候, 我们利用<script>标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称。

axios的使用

认识axios

为什么选择axios

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

axiox请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

发送请求

发送get请求

import axios from 'axios'
export default {
    name:'app',
    created() {
    // 1.没有请求参数
    axios.get('http://123.207.32.32:8000/category')
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        });
    // 2.有请求参数
    axios.get('http://123.207.32.32: 8000/home/data',{params: {type: 'sell', page: 1}})
        .then(res =>
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
}

发送并发请求

有时候, 我们可能需求同时发送两个请求。使用axios.all, 可以放入多个请求的数组。axios.all([]) 返回的结果是一个数组，使用axios.spread 可将数组 [res1,res2] 展开为 res1, res2

import axios from ' axios'
export default {
    name:'app',
    created() {
        //发送并发请求
        axios.all([axios.get('http://123.207.32.32: 8000/category'),
        axios.get('http://123.207.32.32:8000/home/data',{params: {type: 'sell', page: 1}})] )
            .then(axios.spread((res1, res2) => {
                console.log(res1) ;
                console.log(res2) ;
            }))
    }
}

axios全局配置

在开发中可能很多参数都是固定的。这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

created() {
    //提取全局的配置
    axios.defaults.baseURL = 'http://123.207.32.32: 8000',
    //发送并发请求
    axios.all([axios.get('/category'),
    axios.get('/home/data',{params: { type:'sell',page: 1}})])
        .then(axios. spread( (res1，res2) => {
            console.log(res1);
            console.log(res2);
        }))
}

常见配置选项

配置	描述
请求地址	url: '/user'
请求类型	method: 'get'
请根路径	baseURL: 'http://www.mt.com/api'
请求前的数据处理	transformRequest:[function(data){}]
请求后的数据处理	transformResponse: [function(data){}]
自定义的请求头	headers:{'x-Requested-With':'XMLHttpRequest'}
URL查询对象	params:{ id: 12 }
查询对象序列化函数	paramsSerializer: function(params){ }
request body	data: { key: 'aa'}
超时设置s	timeout: 1000,
跨域是否带Token	withCredentials: false,
自定义请求处理	adapter: function(resolve, reject, config){}
身份验证信息	auth: { uname: '', pwd: '12'}
响应的数据格式	json / blob /document /arraybuffer / text / stream responseType: 'json'

axios实例

为什么创建axios实例

当我们从axios模块中导入对象时, 使用的实例是默认的实例。当给该实例设置一些默认配置时, 这些配置就被固定下来了。但是后续开发中, 某些配置可能会不太一样。比如某些请求需要使用特定的baseURL或者timeout或者content-Type等。这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息。

如何创建axios实例

//创建新的实例
const axiosInstance = axios.create({ 
    baseURL: 'http://123.207.32.32:8000'，
    timeout: 5000，
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
//发送网络请求
axios Instance({
    url: '/category',
    method:'get'
}).then(res => {
    console.log(res);
}).catch(err => {
    console. log(err);
})

axios的封装

import originAxios from ' axios
export default function axios(option) {
    return new Promise( (resolve, reject) => {
        // 1.创建axios的实例
        const instance = originAxios.create({
            baseURL: '/api',
            timeout: 5000,
            headers:'',
        });
        // 2.传入对象进行网络请求
        instance(option).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        });
    })
}

axios的拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。

//配置请求和响应拦截
instance.interceptors.request.use (config =>{
    console.log('来到了request拦截success中') ;
    return config
},err=>{
    console.log('来到了request拦截failure中');
    return err
})

instance.interceptors.response.use(response => {
    console.log('来到了response拦截success中') ;
    return response.data
},err=>{
    console.log('来到了response拦截failure中');
    return err
})

axios({
url: '/home/data',
method: 'get',
params: {
    type:'sell',
    page:1
}).then(res => {
    console.log(res) ;
}).catch(err => {
    console.log(err);
})

拦截器中可以做什么？

请求拦截中错误拦截较少，通常都是配置相关的拦截。可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

instance.interceptors.request.use(config => {
    console.log('来到了request拦截success中') ;
    // 1.当发送网络请求时，在页面中添加一个loading组件， 作为动画
    // 2.某些请求要求用户必须登录，判断用户是否有token, 如果没有token跳转到login页面
    // 3.对请求的参数进行序列化
    config.data = qs.stringify(config.data)
    console.log(config);
    // 4.等等
    return config
}

响应的成功拦截中，主要是对数据进行过滤。

instance.interceptors. response.use(response => {
    console.log('来到了response拦截success中');
    return response.data
}

响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

err => {
    console.log('来到了response拦截failure中');
    if (err && err .response) {
        switch (err .response.status) {
            case 400 :
                err.message = '请求错误'
                break
            case 401 :
                err.message = '未授权的访问'
                break
        }
    }
    return err
}