axios封装

axios封装

vue2.0

npm install axios  // 安装

1. 创建service.js配置文件

   import axios from 'axios'
   import { Message, Loading } from 'element-ui'
   const ConfigBaseURL = 'http://localhost:8080/' //默认路径，这里也可以使用env来判断环境
   let loadingInstance = null //这里是loading
   //使用create方法创建axios实例
   export const Service = axios.create({
       timeout: 7000, // 请求超时时间
       baseURL: ConfigBaseURL,
       method: 'post',
       headers: {
           'Content-Type': 'application/json;charset=UTF-8'
       }
   })
   // 添加请求拦截器(请求前执行)
   Service.interceptors.request.use(config => {
       loadingInstance = Loading.service({
           lock: true,
           text: 'loading...'
       })
       return config
   })
   // 添加响应拦截器(服务器响应后执行)
   Service.interceptors.response.use(response => {
       loadingInstance.close()
       return response.data
   }, error => {
       console.log('TCL: error', error)
       const msg = error.Message !== undefined ? error.Message : ''
       Message({
           message: '网络错误' + msg,
           type: 'error',
           duration: 3 * 1000
       })
       loadingInstance.close()
       return Promise.reject(error)
   })
   

2. main.js使用

   import {Service} from '@/utils/service'
   Vue.prototype.request = Service	//将axios放在vue的this上
   

3. 使用

   // post方法
   this.request.post(`/menu/delete?id=${val}`).then(res=>{
     	// 请求成功
     }else{
       // 请求失败
     }
   });
   // get方法
   this.request.get("/echarts/getList").then(res =>{
        console.log(res)
   })
   

vue3.0

1. 创建http.js

   import axios from "axios";//创建一个axios的对象
   //生成一个axios的实例
   const http=axios.create({
       baseURL:"http://localhost:8080/",// baseURL会在发送请求的时候拼接在url参数前面
       timeout:3000,//请求超时
   });
   export default http;//导出
   

2. main.js使用

   import axios from "axios";
   const app = createApp(App)
   app.config.globalProperties.axios = axios
   

3. 单页面使用

   getWeather:function (){
         this.axios.get(url).then(res =>{
           // console.log(res)
         })
       }
   

4. 封装API的js文件使用（异步调用）
   封装函数js文件

   import http from "./http";
   export const getWeather = ()=>{
       return new Promise((resolve, reject)=>{
           http.get(url).then(res =>{
               resolve(res)
           })
       })
   }
   

   ​ 页面调用

   // 1.引入
   import  {getWeather} from '../request/HomeHeader.js'
   // 2.获取返回值
   let res = getWeather()
   // 方法一 采用promise实现异步
   res.then((res)=>{
     console.log(res)
   })
   // 方法二 采用async/await实现异步
     async created() {
       let res = await getWeather()
       console.log(res)
     }