axios使用回顾

.axios 使用小结

axios 在vue框架中用于向服务器请求数据，之前了解过一点jQuery 的AJAX 。vue框架的axios 基于Promise ，可以使用 Promise API

作品中用到的axios的请求方式，

axios.request( config )

另外有其他几种方式，用到再说

1. axios.request(config)
2. axios.get(url [,config])
3. axios.post(url[data [,config]])
4. axios.put(url [data [,config]])
5. axios.delete(url [,config])
6. axios.patch(url [data [,config]])
7. axios.head(url [,config])
8. axios(config)

默认的网络请求方法是get,如果需要发送多个请求，并发请求的话需要用到 all 方法。这里没有用到

import axios from 'axios'
export function request(config){
    const instance = axios.create({ //创建axios实例的目的是为了方便使用全局配置，另一方面减少各个组件对axios框架的依赖性
        baseURL: "http://xxxxxxx",
        timeout:xxxx
    })
    //添加axios拦截器
    instance.interceptors.request.use(config => { //添加请求拦截器，检测在请求网络数据时的状态
        return config
    },err=> {
        console.log(err)
    })
    instance.interceptors.response.use(res => { //添加响应拦截器，页面在获取数据后进行检测状态
        return res.data //成功则返回结果
    },err => {
        console.log(err);
    })
    return instance(config) //发送网络请求
}

这里 config 配置选项有必要了解

{
    //服务器的地址，是必须的选项
    url:'/user'
    
    //请求的方式，默认是get
    method:'get'
    
    //如果url不是绝对地址，则会加上 baseURL
    baseURL:'http://localhost:3000'
    
    //headers是自定义要被发送的信息头
    headers:{'X-Requested-with':'XMLHttpRequest'},
        
    //params 是请求连接中的请求参数，必须是个纯对象
    params: { ID:123 }
    
    //timeout 定义请求的事件，单位是毫秒，如果请求事件超过设定时间，请求停止
    timeout:1000
    
    其他的用到再了解
}

创建完网络请求的axios实例 instance 后，各个组件需要请求各自的数据，这里不将所有组件请求的方法放在同一个页面中，将其分类

例如 home 首页

import { request } from './request'

export function getHomeMultidata(){
    return request({
        url:'/home/multidata'//将配置信息返回至request网络请求方法中请求数据
    })
}//接下来在组件中引用该方法，获取存储和渲染数据