原创

Axios的使用

1. 在项目中依赖Axios包

npm install axios --save

2. 基本使用

//导出资源包
import Axios from "axios";

//配置参数相关
/*-------------------------使用全局Axios------------------------------------*/
const config = {
  baseUrl: 'http://xxx.com',//请求服务器
  url: '/home/data', //请求路径
  method: 'get', //请求的方式 默认为Get
  params: {}, //要携带的参数(get)
  data:{},//要携带的参数(post)
  transformRequest:[function (data) {}],//请求前的数据处理函数
  transformResponse: [function (data) {}],//请求后的数据处理函数
  headers:{'x-Requested-With':'XMLHttpRequest'},//自定义请求头
  timeout: 5000,//超时时间
  responseType: 'json',//响应的数据类型
  withCredentials: false//跨域是否带token
};
 Axios(config).then(result=>{
   console.log(result);});


Get请求

Axios({
  url:'http://123.**.32.**:8000/home/multidata',
  methods: 'get'
}).then(result=>{
  console.log(result);
});

//或者


Axios.get('http://123.**.32.**:8000/home/multidata').then(result=>{
  console.log(result);
});

4.自定义全局配置

Axios.defaults.baseURL = 'http://123.**.32.**:8000'; //服务器IP端口
Axios.defaults.timeout = 5000; //超时时间 毫秒

5.并发请求

//并发请求 all函数 参数为请求数组,容纳多个请求,当所有请求都正常完成后 则执行then函数,反之执行catch函数

Axios.all([
  Axios({
    url: '/home/multidata'
  }),
  Axios({
    url: '/home/multidata'
  })
]).then(resultArray=>{
  console.log(resultArray);
}).catch(err=>{
  console.log('有请求失败了!');
});

6.Axios实例应用

/*------------------------创建Axios的实例-----------------------------*/
//对应不同的实例,可以配置不同的默认配置
const instancel = Axios.create({
  baseURL:'http://localhost:9001',
  timeout:10000
});
//使用实例,和全局axios一样
instancel({
  url: '/brand'
}).then(result=>{
  console.log(result);
});

instancel.get('/category').then(result=>{
  console.log(result);
});

7.对Axios进行模块封装

1.抽取一个js文件

import Axios from "axios";

/*封装Axios 请求模块*/
export function request(config) {
  return new Promise((resolve, reject) => {
    const instance = Axios.create({
      baseURL:'http://localhost:9001',
      timeout: 10000
    });
    //回调
    instance(config).then(result=>{
      resolve(result)
    }).catch(err=>{
      reject(err)
    })

  })
}

//简写方式
export function request(config) {
    const instance = Axios.create({
      baseURL:'http://localhost:9001',
      timeout: 10000
    });
	
	
	//添加拦截器 requestConfig:要发出的请求信息
    //(发送请求前)
    instance.interceptors.request.use(requestConfig=>{
      //拦截处理
      //最后将requestConfig返回
      return  requestConfig
    },error => {
      //发出请求失败
    });

    //响应拦截器 result:响应成功的结果
    instance.interceptors.response.use(result=>{
      //对响应结果进行特殊处理
      //必须返回出去
      return result
    },error => {
      //响应错误结果
      console.log(error);
    });
	
	
	
    //直接返回 axios实例(它本身就是一个promise包装好的)
    return  instance(config);

}

2.简单使用该模块

import {request} from "./network/request";

request({
  url: 'category',
}).then(result=>{
  console.log(result);
}).catch(err=>{
  console.log('请求有误');
});

Vue
前端

留言板