Vue学习记录day08: axios

Axios

 

为什么选择axios? 作者推荐和功能特点

 

 

 

功能特点:

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

 

支持多种请求方式:

• 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]])

 

示例：（为了不破坏老师规矩，ip地址不透露）

import Vue from 'vue'
import App from './App'

import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

//1.axios的基本使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'get'
}).then(res=>{
  console.log(res.data)
})

axios({
  url: 'http://IP:7878/api/m5/home/data',
  //专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res=>{
  console.log(res.data)
})

//2.axios发送并发请求
axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url: 'http://IP:7878/api/m5/home/data',
    //专门针对get请求的参数拼接
    params: {
      type: 'pop',
      page: 5
    }
  })]).then(
  result=>{
    console.log(result);
  })
// axios.spread() 可将数组 [res1,res2] 展开为 res1, res2
axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url: 'http://ip:7878/api/m5/home/data',
    //专门针对get请求的参数拼接
    params: {
      type: 'pop',
      page: 5
    }
  })]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

全局配置

axios.defaults.baseURL = 'http://IP:7878'
axios.defaults.timeout = 5000

axios.all([
  axios({
    url: '/home/multidata'
  }),
  axios({
    url: '/api/m5/home/data',
    //专门针对get请求的参数拼接
    params: {
      type: 'pop',
      page: 5
    }
  })]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

常见的配置选项

请求地址

purl: '/user',

请求类型

pmethod: 'get',

请根路径

pbaseURL: 'http://www.mt.com/api',

请求前的数据处理

ptransformRequest:[function(data){}],

请求后的数据处理

ptransformResponse: [function(data){}],

自定义的请求头

pheaders:{'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等.
• 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

 

//4.创建对应的axios的实例
const instance1 = axios.create({
  baseURL: 'http://IP/api/m5',
  timeout: 5000
})

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

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


const instance2 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
instance2({
  url: '/home/multidata'
}).then(res=>{
  console.log("instance2",res)
})

 

 

axios封装

 创建一个文件夹network 并且创建一个request.js 文件

import axios from 'axios'

//方法四
export function request(config) {
  //创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  //发送真正的网络请求
  return instance(config);  //本身返回值就是Promise
}

//方法三
/*export function request(config) {
  return new Promise((resolve,reject)=>{
    //创建axios的实例
    const instance = axios.create({
      baseURL: 'http://152.136.185.210:7878/api/m5',
      timeout: 5000
    })
//发送真正的网络请求
    instance(config)
      .then(res =>{
        resolve(res)
      })
      .catch(err=>{
        reject(err)
      })
  })
}*/

//方法二
// export function request(config) {
//   //创建axios的实例
//   const instance = axios.create({
//     baseURL: 'http://152.136.185.210:7878/api/m5',
//     timeout: 5000
//   })
//
// //发送真正的网络请求
//   instance(config.baseConfig)
//     .then(res =>{
//       // console.log(res)
//       config.success(res);
//     })
//     .catch(err=>{
//       // console.log(err)
//       config.failure(err);
//     })
// }

//方法一
// export function request(config,success,failure) {
//   //创建axios的实例
//   const instance = axios.create({
//     baseURL: 'http://152.136.185.210:7878/api/m5',
//     timeout: 5000
//   })
//
// //发送真正的网络请求
//   instance(config)
//     .then(res =>{
//       // console.log(res)
//       success(res);
//     })
//     .catch(err=>{
//       // console.log(err)
//       failure(err);
//     })
// }


function test(aaa, bbb) {
  aaa("hello world"),
    bbb('adwasd')
}

test(function (param) {
  console.log(param)
}, function (paramB) {
  console.log(paramB)
})

在main.js中引用即可

//5.封装request模块
import {request} from "./network/request";
//方法一
// request({
//   url: '/home/multidata'
// },res=>{
//   console.log(res)
// })

//方法二
// request({
//   baseConfig: {},
//   success: function (res) {
//     console.log(res);
//   },
//   failure: function (err) {
//     console.log(err);
//   }
// })

//方法三/方法四
request({
  url: '/home/multidata'
}).then(res=>{
  console.log(res)
}).catch(err => {
  console.log(err)
})

如何使用拦截器

export function request(config) {
  //1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  //2.axios的拦截器
  //2.1请求拦截的作用
  instance.interceptors.request.use(
    config=> {
      console.log(config);
      //1.比如config中的一些信息不符合服务器的要求

      //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

      //3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
      return config;
    },error => {
      console.log(error);
    }
  );
  //2.2响应拦截
  instance.interceptors.response.use(
    res => {
      // console.log(res)
      return res.data;
    },
    error => {
      console.log(error);
    }
  );

  //3.发送真正的网络请求
  return instance(config);  //本身返回值就是Promise
}