Vue axios详解 实例

axios用来链接ajax,去链接后台,可以在浏览器中发送XMLHttpRequests,支持在node中发送Http请求,支持promise,可以拦截请求和响应,可以转换请求和响应的数据，能够取消请求，自动转化json数据，可以防止XSRF网络攻击，可以设置多个回调函数。

安装：

npm i axios -S 安装axios

属性和方法

        axios.get(路径，参数) 查询请求，放在请求头

        axios.post(路径，参数) （增删改）处理数据，上传文件 放在请求体

        axios.delete(路径，参数) 请求删除

        axios.head(路径，参数) 和get一样，响应体不会被返回

        axios.options(路径，参数) 返回服务器特定资源支持的http请求方法

        axios.put(路径，参数) 修改和更新

        axios.patch(路径，参数) 修改和更新局部资源

        axios.request(参数) 可以设置前面的所有请求方式

引入、定义全局变量

import axios from 'axios'
app.config.globalProperties.$axios=axios

例如

#### get访问

import axios from 'axios'
const data = reactive({
            str:"hello",
            arr:[],
            })
        onMounted(()=>{
            // 参数用对象形式,{}
            // axios.get(路径，参数)
            axios.get("https://114.55.145.59:8443/librarytag/tag")
            //成功的回调函数
            .then(function(res){
                console.log("----------",res.data)
                data.arr=res.data
                console.log(data.arr)
            })
            //失败的回调函数
            .catch((error)=>{
                console.log(error);
            })
        })

#### post访问

axios.post("[https://114.55.145.59:8443/librarytag/tag](https://114.55.145.59:8443/librarytag/tag)",{参数值})
.then(function(res){//成功的回调函数
  console.log(res)
})
.catch(function(error){//失败的回调函数
  console.log(error)
})

#### request访问

 import {getCurrentInstance} from 'vue'
 const {appContext:{config:{globalProperties}}} = getCurrentInstance()
        globalProperties.$axios.request({
            methods:"get",
            url:"/api/weather_mini?city=北京",
            data:{},
            // headers: {}//设置请求头
        }).then((response)=> {
            data.obj = response.data.data
            console.log(data.obj)
        }).catch(function (error) {
            console.log(error)
        })
        return {...toRefs(data)}

request下的参数值

        url定义请求路径

        method http请求方式

        data 向后台发送数据

        headers:{}自定义请求头

        params:{}定义get请求数据

        timeout:1000 表示请求超时的毫秒数

        withCredentials:true 用来设置是否要做跨域请求凭证

        resonseType:"json"服务器返回的数据类型 json text blob(二进制) ArrayBffer(数据流) document

        resposeEncoding:"utf8" 设置相应的字符集