Axios+Vue 网络模块封装

一、axios优点

可以在浏览器中发送XMLHttpRequests,可以在node.js中发送http请求,支持Promise API,拦截请求和响应,etc

二、axios的基本使用

1.安装axiox(开发时依赖--save-dev;运行时依赖--save)

sudo cnpm install axios --save

 2.使用

//基础使用
import axios from 'axios'

//get请求
axios({
        url:'http://httpbin.org/get',
        methods:'get',//默认get请求
        params:{},//get请求参数拼接
      }).then(res=>{
        console.log(res);
      })

//三种post传参请求,get方法传参用params,post方法用data

//1.Content-Type: application/json
let data = {"age":"12","name":"aaa"};
axios.post('http://httpbin.org/post',data)
.then(res=>{
    console.log('res=>',res);            
})

//2.Content-Type: multipart/form-data
let data = new FormData();
data.append('age','12');
data.append('name','aaa');
axios.post('http://httpbin.org/post',data)
.then(res=>{
    console.log('res=>',res);            
})

//3.Content-Type: application/x-www-form-urlencoded
import qs from 'Qs'
let data = {"age":"12","name":"aaa"};
axios.post('http://httpbin.org/post',qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

3.axios发送并发请求

axios.all([
        axios({
          url:'http://httpbin.org/get',
        }),
        axios({
          url:'http://httpbin.org/get',
        }),
      ]).then(axios.spread((res1,res2)=>{
        console.log('res1',res1);
        console.log('res2',res2);
      }))

 4.axios的相关常见配置信息

//通过改变axios中的defaults中的属性设置全局配置

axios.defaults.baseURL = 'http://httpbin.org' //修改请求跟路径
axios.defaults.timeout= 5000 //修改请求超时时间

5.创建axios实例

//创建axios实例
const instance = axios.create({
    baseURL:'',
    timeout:1000,
})
//使用实例
instance({
    url:'',
    params:{}
}).then(res=>{
    console.log(res)
})

6.axios封装

为了维护方便通常会将axios进行封装,在src下新建axisoConfig目录,在request.js下进行封装

import axios from 'axios'

export function request(config){
  //创建axios实例

  const instance = axios.create({
    baseURL:'http://httpbin.org',
    timeout:1000,
  })

  //拦截器的使用

  //1.请求拦截,常用于以下情况
  //>config中的信息不符合服务器的要求(eg.没有携带token信息)
  //>请求过程中添加loading动画
  instance.interceptors.request.use(
    //请求成功拦截
    config=>{
      console.log(config);//拦截处理
      return config //需要return结果
    },
    //请求失败拦截
    err=>{
      console.log(err);
    }
  )
  //2.响应拦截
  instance.interceptors.response.use(
    //响应成功拦截
    res=>{
      console.log(res);//拦截处理
      return res.data;//返回响应数据
    },
    //响应失败拦截
    err=>{
      console.log(err);
    }
  )

  //发送请求
  return instance(config)
}

 封装后的使用

import {request} from '../axiosConfig/request'

 request({
        url:'/get',
      }).then(res=>{
        console.log(res);
      })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值