vue axios的封装

2021-05-10 17:05:53 阅读：92 来源： 互联网

标签：axios console 请求 get url return vue 封装

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)
}

标签：axios,console,请求,get,url,return,vue,封装
来源： https://www.cnblogs.com/baobaow/p/14751680.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue axios的封装