ajax-plus 사용법 소개(코드)

이 글은 ajax-plus(코드) 사용에 대한 소개를 담고 있습니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

ajax-plus

axios 기반 Vue 플러그인

npm 모듈 소개

먼저 npm을 통해

npm install --save ajax-plus
or
yarn add ajax-plus -S

를 설치한 후 항목 파일에 이를 소개하고 구성합니다.

axios 구성을 일치시킵니다. 자세한 내용은 axios

import Vue from 'Vue'
// 引入
import ajaxPlus from 'ajax-plus'
// 配置
Vue.use(ajaxPlus, {
    //这里写一些ajax的option,详见axios文档,比如
    baseURL: "https://jsonplaceholder.typicode.com",
    timeout: 150000
})

Example

$ajaxPlus 메소드

를 참조하세요. Vue 컴포넌트에 $ajaxPlus 메소드를 추가하고 다음과 같이 사용하세요.

// method可以为 get、delete、options、post、put、patch、head

// url为去除baseUrl的

// data为object

this.$ajaxPlus(method, url, data, res =>{
    //success call back code
})

//也可以省略data参数，直接写callback(鉴于有些请求不需要传参数)
this.$ajaxPlus(method, url, res =>{
    //success call back code
})

//$ajaxPlus已经在源码中处理catch容错了，假若想在代码里处理报错，再加一个参数，如下

this.$ajaxPlus(method, url, data, res =>{
    //success call back code
},{
    //catch是ajax请求失败后 要执行的代码
    //finallyCb是ajax请求结束后 要执行的代码，无论成功或者失败
    catchCb:()=>{//code}    
    finallyCb:()=>{//code}
})

위의 catchCb와 finallyCb는 거의 사용되지 않습니다

ajax-plus vue global mixin을 제공합니다. ajax 요청이 완료된 후 로딩 변수가 자동으로 false로 설정됩니다. 이 변수를 사용하면 버튼의 고주파수 방지 기능과 같은 일부 UI 레이어를 수행할 수 있습니다.

Vue.mixin({
    data () {
      return {
        loading: false
      }
    }
  })

다른 관련 작업을 수행하려는 경우 finallyCb.

예를 들어

<el-button :loading="loading1" @click="handleSubmit">按钮1</el-button>

handleSubmit(){
    this.$ajaxPlus('post','/submit',{foo:1, bar:2}, res=>{
        alert('提交成功了')
    },{
        catchCb:()=>{
            alert('提交失败了')
        },    
        finallyCb:()=>{
            //按钮置为可点击状态
            this.loading1 = false;
        }
    })
}

$ajax

다음과 같이 this.$axios를 통해 axios의 모든 API 메서드를 사용할 수도 있습니다.

this.$ajax.get(url, data).then(res =>{
  //拿到res了
})

this.$ajax.post(url, data).then( res =>{
  //拿到res了
})

try {
  const data = await this.$ajax.post(url, data)
} catch (error) {
  
}

프런트 엔드의 불일치로 인해 및 백엔드 계약에서는 콜백의 심층 처리가 완벽하지 않습니다.

Axios는 Router 및 Vuex와 결합하면 더욱 강력해질 수 있습니다. 예를 들어 인터셉터는 상태에 따라 로그인 여부를 결정할 수 있으며, 응답 관련 오류 보고 및 관련 UI Diag를 결합할 수 있습니다. 그리고 메시지는 더욱 좋아질 것입니다.

위 내용은 ajax-plus 사용법 소개(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!