Vue基础入门(二)axios简介

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue基础入门(二)axios简介

chinpang 2018-08-12 21:12:00 浏览1265
展开阅读全文

axios简介

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

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

引入方式

npm install axios --save

使用

axios并没有install 方法,所以是不能使用vue.use()方法的。
那么难道每个文件都要来引用一次?解决方法有很多种:

  • .结合 vue-axios使用
  • axios 改写为 Vue 的原型属性
  • 结合 Vuex的action

vue-axios使用

首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

之后就可以使用了,在组件文件中的methods里去使用了

getdata(){
            this.axios.get('/vue-demo/api/getdata').then((response)=>{
                console.log(response.data)
            }).catch((response)=>{
                console.log(response)
            })
        }

通过使用easy-mack实现一个接口的请求


img_c06ab7919dd466e73065282c7de697f3.png
1533094933431.png
img_9ca87c86fa037af5ac508c059eda726d.png
1533094944634.png

通过设置proxyTable实现跨域请求

proxyTable: { //设置地址代理,跨域请求外部链接
      '/vue-demo': {
        target: 'https://easy-mock.com/mock/5b6127a76551d73d713927c4/',
        changeOrigin: true,
        pathRewrite: {
          '^/vue-demo': '/vue-demo'
        }
      }
    }
npm run dev

访问地址通过一个组件的触发请求easy-mock的接口,就可以看到返回的数据了


img_db0661a5eb91988ba9e70a911aba2489.png
1533095093186.png

axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上

import axios from 'axios'
Vue.prototype.$ajax= axios

在组件中使用

this.$ajax.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

Vuex的action

在vuex的仓库文件store.js中引用,使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})
export default store

在组件中发送请求的时候,需要使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}

网友评论

登录后评论
0/500
评论
chinpang
+ 关注