vue-8-axios网络请求第三方模块

使用第三方模块axios来进行网络请求

请求方式包括：

　　axios(config)

　　axios.all([])

　　axios.request(config)

　　axios.get(url[, config])

　　axiosdelete(url[, config])

　　axios.head(url[, config])

　　axios.post(url[, data[,config]])

　　axios.put(url[, data[,config]])

　　axios.patch(url[, data[,config]])

 

安装：

 npm install axios --save

使用：

　　导入： import  axios  from 'axios'　

// 默认get请求，需要追加参数时，可以使用params提交参数
axios({
  url:'http://访问路由',
  params:{
    参数: '...',
  },
  method: 'get'
}).then(res=>{
  console.log('--', res)
})

// axios并发请求
axios.all([
    axios({
      url:'http://路由',
      params:{
        type: 'pop',
        page: 1
      },
    }),
    axios({
      url:'http://路由',
      method: 'get'
    })
]).then(res=>{
      console.log(res)
    })
返回一个数组，里边包含多个请求的返回数据

获取返回值也可以使用axios.spread解构：
　.then(axios.spread([res1, res2]=>{ console.log(res) }))

 axios 的封装

　　项目中src目录下创建network目录，其中创建基本的网络请求js：request.js

import axios from "axios";


export function request(config){
    return new Promise((resolve, reject)=>{
        // 创建axios实例
        const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
        // 1. 复杂方式：调用实例，传入参数，调用成功则走then,失败则走catch(axios实例也是一个promise类型的对象)
        // instance(config)
        //     .then(res=>{
        //         resolve(res)
        //     })
        //     .catch(err=>{
        //         reject(err)
        //     })
        // 2. 简单方式，直接返回instance对象，在调用处直接打印then或catch即可
        return instance(config)
    })
}