Axios基本使用6.axios 应用 npm install axios 在main.js中进行配置内容参数使用 u

“这是sylu计算机协会第一次技术征文活动”

6.axios

axios是一个专注于网络请求的库！

一般可以在created函数中调用ajax获取页面初始化所需的数据。

axios在请求到数据之后在数据外部增加了一层包装

应用

npm install axios

在项目目录之下安装依赖包

在main.js中进行配置内容

import Vue from "vue";
import axios from "axios";
// 配置请求的跟路径
axios.defaults.baseURL = "http://127.0.0.1:8888/api/";
// 将 axios 实例挂载为 Vue 的一个全局方法
Vue.prototype.$http = axios;

参数使用

url：请求路径，string类型
method：请求方法，string类型
baseURL：baseURL会自动加在url前面，除非url是一个绝对URL，string类型
transformRequest：允许在向服务器发送请求之前，修改请求数据，只适用于post，put，patch请求，数组类型，数组里面的最后一个函数必须返回一个字符串

小总结：

vue中axios请求写在下边的1，2
created:html加载完成之前，执行。执行顺序：父组件-子组件

mounted:html加载完成后执行。执行顺序：子组件-父组件

methods：事件方法执行

watch：watch是去监听一个值的变化，然后执行相对应的函数。

computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

返回数据模板

{
	config:{};
	data:{真实数据};
	headers:{};
	request:{};
	status:XXX;
	statusText:''
}

请求返回对象是promise对象

axios模板

axios({
    //请求方式
    method:post.
    url:'url',
    //请求体参数（post）
    data:{},
    //查询体参数（get）
    params：{}
}).then(function(result){
    console.log(result)
})

返回值是pormise实例，则前面可以添加await！
await只能用在被async修饰的方法之中，当如此操作之后，返回数据就是正常数据

解构赋值

    addEventListener('click',async function(){
        const res=await axios({
        method:"get"
        url:""
    })
        //未解构
        console.log(res)
    })     


addEventListener('click',async function(){
    //解构得到返回数据中的data
        const {data}=await axios({
        method:"get"
        url:""
    })
        //解构赋值
        console.log(data)
       //等效上面的res.data
    })        


addEventListener('click',async function(){
    //解构得到返回数据中的data，再将data进行重命名为res
        const {data：res}=await axios({
        method:"get"
        url:""
    })
        //解构赋值
        console.log(res)
       //等效上面的res.data
    })

调用axios之后，使用async/await进行简化

使用解构赋值从axios封装的对象中，把data属性解构出来

将data用：进行重命名

axios.get('url网址'，{
//get参数
params：{}
})

post同上

多次调用axios请求方法

模板如下


function getUserAccount(){
	//调用方式课更换
  return axios.get('url地址');
}
function getUserPermissions(){
  return axios.get('url地址');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))

axios请求与响应拦截器

拦截器分为 请求（request）拦截器和 响应（response）拦截器。

请求拦截器在请求发送前进行必要的操作处理，例如添加统一cookie，token，设置请求头等，相当于是对每个接口里相同操作的一个封装
- 在请求最后调整请求配置的对象
- 在请求执行的最后一刻进行操作

// 添加请求拦截器--代码实现案例：仅供参考
axios.interceptors.request.use(
	function (config) {
  // 在发送请求之前做些什么, 如果vuex⾥有token携带在请求头中
	  if (store.state.token.length > 0 && config.headers.Authorization === undefined) {
    // 发起请求之前, 把token携带在请求头上(表明⾃⼰⾝份)
    config.headers.Authorization = 'Bearer ' + store.state.token
  }
	  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

在响应回来后, 马上执⾏响应拦截器函数
- 判断返回的数据是否存在问题进行执行函数
- 在axios请求响应之后返回

// 添加响应拦截器
axios.interceptors.response.use(
    function (response) {
        // 对响应数据进行操作
        return response;
    },
    function (error) {
        // 对响应错误进行操作
        return Promise.reject(error);
    }
);