Vue之axios基础使用

在这里可以讨论Vue开发技术,插件应用等方面技术

版主: jvip_chen

回复
头像
jvip_chen
社区版主
社区版主
帖子: 211
注册时间: 2019年 1月 5日 13:36 星期六

Vue之axios基础使用

帖子 jvip_chen »

axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
安装
npm安装

代码: 全选

$ npm install axios --save
通过cdn引入

代码: 全选

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
发送GET请求

代码: 全选

// created:vue生命周期中的钩子函数,在这个时间点,data中的数据已经注入到响应式系统中
created(){
    axios.get('api/getData.php',{       // 还可以直接把参数拼接在url后边
        params:{
            title:'眼镜'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });
}
response.data才是真正返回的后台数据
发送POST请求

代码: 全选

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 注意: 如果发送请求时,发现传递的参数是对象,那么可用如下方式传参数
// var params = new URLSearchParams();
// params.append('title', '眼镜');
// params.append('id',1);
// axios.post('/user', params)
//      .then(function(res){})
//      .catch(function(error){});
response.data才是真正返回的后台数据
执行多个并发请求

代码: 全选

//获得用户信息的请求
function getUserAccount() {
     return axios.get('/user/12345');
}
 
//获取用户许可证的请求
function getUserPermissions() {
     return axios.get('/user/12345/permissions');
}
 
axios.all( [ getUserAccount(),  getUserPermissions() ] )
    .then(axios.spread(function (acct, perms) {
        //两个请求现已完成
    })
);
请求拦截器和响应拦截器

代码: 全选

//请求拦截器
axios.interceptors.request.use(
  function (config) {
      // 在发送请求之前做些什么
      return config;
  },
  function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
  }
);

//响应拦截器
axios.interceptors.response.use(
  function (config) {
      // 对响应数据做点什么
      return config;
  },
  function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
  }
);
Vue中axios在发送POST请求时,参数的处理
1. 下载安装第三方模块 qs -> npm install qs --save-dev
2. 处理方式

代码: 全选

// 第一种: 直接在发送的时候,对数据进行qs.stringify处理
// 缺点: 如果项目大,有大量的请求需要发送,那么一个一个加会很麻烦
axios.post("/checkLogin.php", qs.stringify({
  name, pwd
}));

// 第二种: 使用axios.create创建一个新的axios实例,统一对数据进行处理, 同时也要借助qs模块
const Axios = axios.create({
  baseURL: '/api',
  transformRequest: [function (data) {
    const d = qs.stringify(data)
    return d;
  }]
})

Axios.post("/checkLogin.php", {
  name, pwd
});
回复

回到 “Vue开发”