引入axios及跨域使用,js_脚本之家

在vue中,平时会用到数量央求,常用的有:vue-resourse、axios

使用 cnpm 安装 axios
cnpm install axios --save-dev

安装别的插件的时候,能够一向在 main.js 中引进并 Vue.use(卡塔尔,不过 axios
并无法 use,只好各种需求发送哀告的构件中即时引进
为了消除那个题目,有三种开采思路,一是在引入 axios
之后,改过原型链,二是结合 Vuex,封装三个aciton。这里只说修改原型链的法子
改写原型链

金沙网址,后天自个儿说的是axios的post央求

首先在 main.js 中引入 axios
import axios from 'axios'

此刻如若在其它的组件中,是敬谢不敏接受 axios 命令的。所以大家将 axios
改写为 Vue 的原型属性

    Vue.prototype.$http= axios

在 main.js 中增添了这两行代码之后,就能够直接在组件的 methods 中应用
$http命令
例如

  methods: {
    show() {
      this.$http({
        method: 'get',
        url: '/user',
        data: {
          name: 'virus'
        }
     })
  }

github源文件及文书档案地址:【

配置 axios

实质上独有 url 是必需的,完整的 api
能够参照https://www.kancloud.cn/yunye/axios/234845

  1. 对于get请求

    axios.get('/user', {
          params:{
                name:"virus"  
          }
    })
  1. 对于post请求

  axios.post('/user',{
      name:"virus" 
  })

3、 一回性并发多少个央浼

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){
    //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
  }))

4.axios方可由此配备(config)来发送央求

//发送一个`POST`请求
axios({
    method:"POST",
    url:'/user/1111',
    data:{
      name:"virus" 
    }
});

+ 首先,引入axios

完全的央求还相应包罗 .then 和 .catch
   .then(function(res){
          console.log(res)
        })
    .catch(function(err){
          console.log(err)
        })

当呼吁成功时,会实行 .then,不然施行 .catch
那八个回调函数都有各自独立的作用域,假诺直白在里边访谈 this,不能访谈到
Vue 实例,当时只要增多三个 .bind(this卡塔尔(قطر‎ 就会清除这么些标题

    .then(function(res){
          console.log(this.data)
     }.bind(this))
CDN: npm: npm install axios 并在全局的js中引入:import axios from 'axios';
央浼格局的别称,这里对富有曾经支撑的哀告形式都提供了有益的外号
axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

•get请求

另外,补充

vue
cli脚手架前端调后端数据接口时候的本土代理跨域难点,如本身在本地localhost访谈接口http://40.00.100.100:3002/是要跨域的,约等于浏览器设置了一到秘籍,会报错XMLHTTPRequest
can not load
http://40.00.100.100:3002/.
Response to preflight request doesn’t pass access control….
为啥跨域同源非同源自身去查吧,在webpack配置一下proxyTable就OK了,如下
config/index.js

dev: {
    加入以下
    proxyTable: {
      '/api': {
        target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
                //这里理解成用‘/api’代替target里面的地址,
                后面组件中我们掉接口时直接用api代替 比如我要调
                用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
        }
      }
    },
axios.get .then { console.log .catch { console.log;

•post请求

 依赖于qs包,将对象转换成以&连接的字符串//例:axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then { console.log

附录:配置 axios

上边封装的措施中,使用了 axios 的四个结构项,实际上唯有 url
是必需的,完整的 api 能够参照运用表明

为了便利,axios 还为每一个方法起了别名,比如上边的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

总体的呼吁还应该满含 .then 和 .catch

.then{ console.log.catch{ console.log

当倡议成功时,会执行 .then,不然实行 .catch

那三个回调函数都有各自独立的作用域,假如一向在里头访谈 this,不可能访谈到
Vue 实例

那儿只要增多贰个 .bind 就能够缓慢解决那么些问题

.then{ console.log}.bind

总结

以上所述是作者给我们介绍的关于vue中的ajax央浼和axios包难题,希望对我们有着扶植,倘使大家有其它疑问请给本身留言,小编会及时过来我们的。在这里也极其感激我们对剧本之家网址的支持!

发表评论

电子邮件地址不会被公开。 必填项已用*标注