axios 경로 분석

---

mock/artical.js - 더미 생산

mock/artical.js 파일을 보면

 

여러개의 module 이 exports 되어 있는 것을 확인 할 수 있다.

여기서는 여러 목업 데이터들을 만들어주는 공장 역활을 하는 것 같다.

 

json 파일도 import 하는 방법을 사용하기도 하고, 

for 문을 돌려서 랜덤으로 더미를 생산하기도 한다.

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export 

 

mock/artical.js 파일에 예시로 이렇게 정의 되어 있을 때

module.exports = [
{
    url: '/vue-element-admin/article/update',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        data: 'success'
      }
    }
  }
]

---

src/api/article.js - 더미 전달

 

src/api/article.js 파일에는 아래처럼 정의 되어 있다.

아래 url 이 mock/article.js 을 가르키는 것이다.

 

import request from '@/utils/request'

export function updateArticle(data) {
  return request({
    url: '/vue-element-admin/article/update',
    method: 'post',
    data
  })
}

 

@utils/request 에는 axios 를 create 하였기 때문에

@utils/request 를 import 하는 것 만으로도 axios 를 request 로써 사용 가능하게 할 수 있다.

---

vue 파일 - 더미 사용

vue 파일에서 위에 정의한 더미들을 사용하는 방법은 아래 처럼 사용하는 것을 발견했다.

 

import updateArticle  from '@/api/article'

 

updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) 
          
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }

 

요로케 (●ˇ∀ˇ●)

updateArticle(tempData).then(() => {
	 
	this.$notify({
      title: 'Success',
      message: 'Update Successfully',
      type: 'success',
      duration: 2000
	})
})

---