vue axios的封装

axios的封装首先在src目录创建utils/request.js用于存放axios请求页面点击按钮向后台发送请求事例代码:templatediv class=homebutton @click=getHandle发送get请求/buttonbutton @click=postHandle...

axios的封装

首先在src目录创建utils/request.js用于存放axios请求

页面点击按钮向后台发送请求事例代码:

<template>
  <div class="home">
    <button @click="getHandle">发送get请求</button>
    <button @click="postHandle">发送post请求</button>
    <button @click="getByMineHandle">调用封装的get请求</button>
  </div>
</template>

<script>
import axios from 'axios'
import  { get} from '../utils/request'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods:{
    //axios.get 发起get请求
    //参数一表示请求地址
    //参数二表示配置信息
    //具体可见： http://www.axios-js.com/zh-cn/docs/
    //params  表示传递到服务器端的数据，已url参数的形式拼接在请求地址后面
    //{page:1,per:3}
    // 比如:http://jsonplaceholder.typicode.com/
    //最终生成：http://jsonplaceholder.typicode.com/?page=1&per=3
    // 其中?表示可选参数
    //headers  表示请求头
    getHandle(){
      axios.get('http://jsonplaceholder.typicode.com/',{
         params:{
           page:3,
           per:2
         },
        headers:{}
      })
      .then(res=>console.log(res))
    },
    postHandle(){
      //post请求传递三个参数
      //请求地址
      //请求数据，请求配置，
      //axios默认发送的数据是json格式的
      //配置信息
      //headers
      //content-type:'application/json' 默认
       axios.post('http://open.qunar.com/',{
         userName:'xiaoming',
         password:'112132'
       },{})
      .then(res => console.log(res))
      .catch(err=>console.log(err))
    },
    getByMineHandle(){
      get('abc',{page:3,per:2}).
      then(res=>console.log(res))
    }
  }
}
</script>

封装的axios代码:

import axiox from 'axios'
//创建一个请求实列
const instance =axiox.create({
    baseURL:'http://jsonplaceholder.typicode.com/',//baseURL会在发送请求的时候拼接在url参数的前面
    timeout:5000 // `timeout` 指定请求超时的毫秒数(0 表示无超时时间).如果请求花费了超过 `timeout` 的时间，请求将被中断
})

//请求拦截
//所有的网络请求都会先走这个方法
// 添加请求拦截器,所有的网络请求都会先走这个方法，我们可以在它里面为请求添加一些自定义的内容
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('全局请求拦截')
    console.log(config)
    console.groupEnd()
    config.headers.token='12343'
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
//此处可以根据服务器的返回状态码做响应的处理
//404 404 500
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log('全局响应拦截')
    console.log(response)
    console.groupEnd()
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export function get(url,params) {
    return instance.get(url,{
        params
    })
}

export function post(url,data) {
    return instance.post(url,data)
}

export  function del(url) {
    return instance.delete(url)
}

export  function put(url,data) {
    return instance.put(url,data)
}