码迷,mamicode.com
首页 > 移动开发 > 详细

Vue学习------------(32)axios

时间:2021-03-29 12:04:07      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:一个   type   mic   ram   img   install   配置   work   rgba   

安装axios

npm install axios --save

 

axios使用

axios({
  url: ‘http://123.207.32.32:8000/home/multidata‘,
  method: ‘get‘
}).then((res) => {
  console.log(res);
})

axios({
  // url: ‘http://123.207.32.32:8000/home/data?type=sell&page=1‘,
  url: ‘http://123.207.32.32:8000/home/data‘,
  //专门针对get请求的参数拼接
  params: {
    type: ‘sell‘,
    page: 5
  },
  method: ‘get‘
}).then((res) => {
  console.log(res);
})

  

发送并发请求

有时候,我们可能需要同时发送两个请求

  • 使用axios.all可以放入多个请求的数组
  • axios.all([ ])返回的结果是一个数组
axios.all([
    axios({
      url: ‘http://123.207.32.32:8000/home/multidata‘
    }),
    axios({
      url: ‘http://123.207.32.32:8000/home/data‘,
      //专门针对get请求的参数拼接
      params: {
        type: ‘sell‘,
        page: 5
      }
    })
]).then((result) => {
  console.log(result[0]);
  console.log(result[1]);
})

  

axios全局配置

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

axios.defaults.baseURL = ‘http://123.207.32.32:8000‘
axios.defaults.timeout = 5000

axios.all([
    axios({
      url: ‘/home/multidata‘
    }),
    axios({
      url: ‘/home/data‘,
      //专门针对get请求的参数拼接
      params: {
        type: ‘sell‘,
        page: 5
      }
    })
]).then((result) => {
  console.log(result[0]);
  console.log(result[1]);
})

  

常见的配置选项:

请求地址:

  • url: ‘/user‘

请求类型:

  • method: ‘get‘

请求根路径:

  • baseURL: ‘http://123.207.32.32:8000‘

请求前的数据处理:

  • transformRequest: [function(data){  }]

请求后的数据处理:

  • transformResponse: [function(data){  }]

自定义的请求头:

  • headers: {‘x-Requested-With‘}: ‘XMLHttpRequest‘}

URL查询对象:

  • params: {id: 12}

 

axios的实例

为什么要创建axios的实例?

  • 在开发中,我们需要的axios的配置是各种各样的
  • 比如某些请求需要使用特定的baseURL或者timeout
  • 这时,我们可以创建新的实例,并且传入属于该实例的配置信息

封装request模块

目录结构

技术图片

 

 

封装request模块(通过回调函数success和failure处理)

request.js

import axios from "axios";

export function request (config, success, failure) {
    //创建axios的实例
    const instance = axios.create({
        baseURL: ‘http://123.207.32.32:8000‘,
        timeout: 5000
    })

    //发送真正的网络请求
    instance(config)
        .then(res => {
            success(res)
        })
        .catch(err => {
            failure(err)
        })
}

  

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

//封装request模块(通过回调函数success和failure处理)
import {request} from "./network/request";

request({
  url: ‘/home/multidata‘
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

  

封装request模块(通过Promise方式)

request.js

import axios from "axios";

export function request (config, success, failure) {
    //创建axios的实例
    const instance = axios.create({
        baseURL: ‘http://123.207.32.32:8000‘,
        timeout: 5000
    })

    return new Promise((resolve, reject) => {
        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

  

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

//封装request模块(通过Promise方式)
import {request} from "./network/request";

request({
  url: ‘/home/multidata‘
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

  

封装request模块(最终方案)

因为axios本身返回的就是Promise,所以不用再封装一层Promise

request.js

import axios from "axios";

export function request (config, success, failure) {
    //创建axios的实例
    const instance = axios.create({
        baseURL: ‘http://123.207.32.32:8000‘,
        timeout: 5000
    })

    return instance(config)
}

  

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘
import axios from "axios";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

//封装request模块(通过Promise方式)
import {request} from "./network/request";

request({
  url: ‘/home/multidata‘
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

  

axios拦截器

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

import axios from "axios";

export function request (config, success, failure) {
    //创建axios的实例
    const instance = axios.create({
        baseURL: ‘http://123.207.32.32:8000‘,
        timeout: 5000
    })

    //axios的拦截器
    //请求拦截
    instance.interceptors.request.use(aaa => {
        console.log(aaa);
        //请求拦截的作用:
        //1、比如aaa中的一些信息不符合服务器的要求,在这里可以进行处理
        //2、比如每次发送网络请求时,都希望在界面中显示一个请求中的图标(比如一个循环的圈圈)
        //3、某些网络请求(比如登录(token)),必须携带一些特殊的信息

        //必须返回,如果不返回则请求发不出去
        return aaa;
    }, error => {
        console.log(error);
    })

    //响应拦截(服务器将结果发过来了)
    instance.interceptors.response.use(res => {
        console.log(res);
        //必须返回,如果不返回就拿不到结果
        //在这里将无用的数据剔除掉,将有用数据返回
        return res.data
    }, error => {
        console.log(error);
    })

    //发送真正的网络请求
    return instance(config)
}

  

 

Vue学习------------(32)axios

标签:一个   type   mic   ram   img   install   配置   work   rgba   

原文地址:https://www.cnblogs.com/tang321/p/14584128.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!