javaWeb axios

Axios

一、简介

Axios 是一个基于 promise 的网络哀求库，作用于node.js 和欣赏器中。 它是 isomorphic 的(即同一套代码可以运行在欣赏器和node.js中)。在服务端它利用原生 node.js http 模块, 而在客户端 (欣赏端) 则利用 XMLHttpRequests。

特性：
从欣赏器创建 XMLHttpRequests
从 node.js 创建 http 哀求
支持 Promise API
拦截哀求和相应
转换哀求和相应数据
取消哀求
自动转换JSON数据
客户端支持防御XSRF


二、详细实例先容


App.Vue
```html
<script setup type="module">
  import axios from 'axios'
  import { onMounted,reactive } from 'vue';
   
  let jsonData =reactive({code:1,content:'我积极不是为了你而是由于你'})
  let getLoveMessage =()=>{
    axios({//axios方法返回一个promise的实例
      method:"post", // 哀求方式
      url:"https://api.uomg.com/api/rand.qinghua?format=json",  // 哀求的url
      data:{ // 当哀求方式为post时,data下的数据以JSON串放入哀求体,否则以key=value情势放url后
        username:"123456"
      }
    }).then( function (response){//相应乐成时要实验的函数
      console.log(response)
      Object.assign(jsonData,response.data)
    }).catch(function (error){// 相应失败时要实验的函数
      console.log(error)
    })
  }
 
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
 
    <div>
      <h1>本日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取本日土味情话</button>
    </div>
</template>
<style scoped>
</style>


Axios get和post方法


> 设置添加语法
``` javascript
axios.get(url[, config])
axios.get(url,{
   上面指定设置key:设置值,
   上面指定设置key:设置值
})
axios.post(url[, data[, config]])
axios.post(url,{key:value //此位置数据，没有空对象即可{}},{
   上面指定设置key:设置值,
   上面指定设置key:设置值
})
```


> 测试get参数
async function getMessage(){
return await axios.get(
Url,
{向url后添加的键值对参数},
Headers:{设置哀求头}
)
}
 
 
``` html
<script setup type="module">
  import axios from 'axios'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我积极不是为了你而是由于你'})
  let getLoveWords= async ()=>{
    try{
      return await axios.get(
        'https://api.uomg.com/api/rand.qinghua',
        {
          params:{// 向url后添加的键值对参数
            format:'json',
            username:'zhangsan',
            password:'123456'
          },
          headers:{// 设置哀求头
            'Accept' : 'application/json, text/plain, text/html,*/*'
          }
        }
      )
    }catch (e){
      return await e
    }
  }
 
  let getLoveMessage =()=>{
     let {data}  = await getLoveWords()
     Object.assign(message,data)
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>本日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取本日土味情话</button>
    </div>
</template>
<style scoped>
</style>
```
 
 
> 测试post参数
async function PostMessage(){
return await axios.post(
{url的所在},
{哀求体中的json数据},
{须要放进标头的键值对参数}
)
}
 
```html
<script setup type="module">
  import axios from 'axios'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我积极不是为了你而是由于你'})
  let getLoveWords= async ()=>{
    try{
      return await axios.post(
        'https://api.uomg.com/api/rand.qinghua',
        {//哀求体中的JSON数据
            username:'zhangsan',
            password:'123456'
        },
        {// 键值对参数
            params:{// url上拼接的键值对参数
                format:'json',
            },
            headers:{// 哀求头
                'Accept' : 'application/json, text/plain, text/html,*/*',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }
      )
    }catch (e){
      return await e
    }
  }
  let getLoveMessage =()=>{
     let {data}  = await getLoveWords()
     Object.assign(message,data)
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>本日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取本日土味情话</button>
    </div>
</template>
<style scoped>
</style>
```
 
 
 
拦截器

如果想在axios发送哀求之前,大概是数据相应返来在实验then方法之前做一些额外的工作,可以通过拦截器完成

添加哀求拦截器 哀求发送之前：

axios.interceptors.request.use(
  function (config) {
    // 在发送哀求之前做些什么
    return config;//必须返回config
  },
  function (error) {
    // 对哀求错误做些什么
    return Promise.reject(error);
  }
);
 
 
 添加相应拦截器 数据相应返来:

axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对相应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对相应错误做点什么
    return Promise.reject(error);
  }
);
 
 
+ 界说src/axios.js提取拦截器和设置语法
Axios.js:
import axios from 'axios'

//  创建instance实例
const instance = axios.create({
    baseURL:'https://api.uomg.com',
    timeout:10000
})
//  添加哀求拦截
instance.interceptors.request.use(
    // 设置哀求头设置信息
    config=>{
        //处置惩罚指定的哀求头
        console.log("before request")
        config.headers.Accept = 'application/json, text/plain, text/html,*/*'
        return config
    },
    // 设置哀求错误处置惩罚函数
    error=>{
        console.log("request error")
        return Promise.reject(error)
    }
)
// 添加相应拦截器
instance.interceptors.response.use(
    // 设置相应精确时的处置惩罚函数
    response=>{
        console.log("after success response")
        console.log(response)
        return response
    },
    // 设置相应非常时的处置惩罚函数
    error=>{
        console.log("after fail response")
        console.log(error)
        return Promise.reject(error)
    }
)
// 默认导出
export default instance
```
+ App.vue
```html
<script setup type="module">
  // 导入我们本身界说的axios.js文件,而不是导入axios依赖  
  import axios from './axios.js'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我积极不是为了你而是由于你'})
  let getLoveWords= async ()=>{
    try{
      return await axios.post(
        'api/rand.qinghua',
        {
            username:'zhangsan',
            password:'123456'
        },//哀求体中的JSON数据
        {
          params:{
            format:'json',
          }
        }// 其他键值对参数
      )
    }catch (e){
      return await e
    }
  }
  let getLoveMessage =()=>{
    // 这里返回的是一个fullfilled状态的promise
    getLoveWords().then(
        (response) =>{
          console.log("after getloveWords")
          console.log(response)
          Object.assign(jsonData,response.data)
        }
    )
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>本日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取本日土味情话</button>
    </div>
   
</template>
<style scoped>
</style>