vue3 学习笔记之axios的使用变化总结

yarn add axios
 
npm install axios
 
bower install axios
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import axios from "axios"
import { onMounted } from "vue"
export default {
 setup(){
  onMounted(()=>{
   axios({
    url:'https://xxxxxx.net/hj/mp/banner/l'
   })
  })
 }
}

module.exports={
 devServer:{
  proxy:{
   '/api':{
    target:'https://xxxxx.net',
    changeOrigin:true,
    pathRewrite:{
     '^/api':''
    }
   }
  }
 }
}

axios.defaults.baseURL ='/api'
axios.defaults.headers.post['Content-Type'] = 'application/json'
 axios({
  url:'/hj/mp/banner/l'
})

import axios from 'axios'
 
//全局配置
axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
//拦截器
axios.interceptors.request.use( config=>{
 return config
},error=>{
 return Promise.error(error)
})
axios.interceptors.response.use( response=>{
 return response.data
},error=>{
 return Promise.error(error)
})
 
export function request(url='',params={},type='POST'){
 //设置 url params type 的默认值
 return new Promise((resolve,reject)=>{
  let promise
  if( type.toUpperCase()==='GET' ){
   promise = axios({
    url,
    params
   })
  }else if( type.toUpperCase()=== 'POST' ){
   promise = axios({
    method:'POST',
    url,
    data:params
  })
  }
    //处理返回
  promise.then(res=>{
   resolve(res)
  }).catch(err=>{
   reject(err)
  })
 })
}
 
//使用时调用
import {request} from '../network/request.js'
export default {
 mounted(){
  request('/hj/mp/banner/l').then(res=>{
   console.log(res);
  }).catch(err=>{
   console.log(err);
  })
 }
}

import axios from 'axios'
 
//全局配置
axios.defaults.baseURL = "/api"
axios.defaults.timeout = 5000
 
export function request(config){
 const instace = axios.create({
  timeout:50000,
  method:'post'
 })
 
  //请求拦截
 instace.interceptors.request.use(config=>{
  return config
 },err=>{})
 //响应拦截
 instace.interceptors.response.use(res=>{
  return res.data
 },err=>{
  //错误处理
 })
 return instace(config)
}
//使用时调用
import {request} from './request'
request({
 url:'/hj/mp/banner/l',
}).then(res=>{
 console.log(res);
}).catch(err=>{
 console.log(err);
})

const app = createApp(App)
app.config.globalProperties.$http = request
app.mount('#app')

import { defineComponent, getCurrentInstance ,onMounted } from "vue"
export default defineComponent ({
 setup(props,ctx){
  const { proxy } = getCurrentInstance()
  onMounted(()=>{
   console.log(proxy);
   proxy.$http('/hj/mp/banner/l').then(res=>{
    console.log(res);
   })
  })
 }
})